Palestra Adobe Edge Animate CC – 23/10/2013

Olá, pessoas!!!

Mais uma palestra de Edge Animate \o/ realizada no dia 23/10/2013 no DRC Treinamentos.

Lá vai uma prévia do que rolou:

Tivemos uma breve apresentação da Creative Cloud com suas vantagens para assinatura.

Passamos também por um introdutório sobre o Edge Animate & Tools.

No Edge Animate, apresentei e demonstrei possibilidades e ferramentas para um trabalho de maneira intuitiva, com criação de conteúdo interativo para as múltiplas plataformas.

Conhecemos um pouco mais do design responsivo e possibilidades com Edge Animate e Edge Reflow.

Conhecemos ainda a nova integração do Photoshop com o Edge Reflow:

– O recurso Generate > Edge Reflow Project está sensacional!

Como sempre, não faltou ninguém 🙂

Tivemos presença registrada do Edge Inspect, Edge Reflow, Edge Code, PhoneGap Build e soubemos quais são as diferenças entre o Edge Typekit e Edge Web Fonts.

Quer saber mais?

Não perca a próxima palestra ou confira o calendário de cursos no DRC Treinamentos 😉

É isso aí pessoal! Até o próximo post e meu enorme agradecimento às pessoas que puderam comparecer!

Beijo grande para todos  😉

 

 

 

 

 

10 Razões para usar o Adobe Edge Animate CC

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!

 

Testando a Nuvem Adobe Creative Cloud

Olá, pessoas!

A nuvem Adobe Creative Cloud é novo serviço de assinatura onde posso verificar e manter meus programas sempre atualizados.

Possui ainda outros serviços auxiliares por mensalidades que relativamente considero baixas pela facilidade e praticidade que proporciona.

Bacana também foi verificar que já está disponível, além dos tutoriais, os Touch Apps.

Vale a pena dar uma conferida!

Estou em dívida com meus posts, portanto, resolvi postar uma imagem do Adobe Creative Cloud (https://creative.adobe.com/), com alguns dos meus games e apresentações de Touchscreen em AS3.

Estou “redesenhando” estes games para a web e mobile com as tecnologias HTML5, CSS3 e Javascript.

Logo teremos mais novidades…

Bjs e até lá!

Refinando seu projeto com o Fireworks CS5.1

Olá, galerinha!

Vou apresentar para vocês, algumas técnicas para melhorarmos a aparência dos nossos trabalhos com Fireworks.

O original encontra-se em http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/

***(original:Benjamin De Cock, Smashing Magazine)***

Vamos começar aqui, traduzindo e apresentando para compartilharmos nossas idéias:

Embora, certamente, não seja tão conhecido como o Photoshop, o Adobe Fireworks é uma grande ferramenta para a criação de interfaces, websites, protótipos, wireframes, ícones e muito mais. Entretanto, muitos designers que utilizam o Photoshop há anos podem estranhar um pouco o Fireworks à primeira vista. O Fireworks tem um fluxo de trabalho um pouco diferente e requer uma abordagem também diferente daquela que você está acostumado a usar com Photoshop.

Nesse artigo, vou compartilhar algumas dicas que uso em meu trabalho com o Fireworks que poderão ajudá-lo a melhorar a qualidade dos seus projetos e fluxo de trabalho. Algumas dessas dicas são apenas explicações rápidas de recursos que você pode não conhecer, enquanto outras são técnicas e métodos para melhorar o padrão visual dos resultados. Vamos começar!

Aperfeiçoar contornos delicados:

Uma das características do Fireworks é que ele  dá ao usuário um monte de opções, mas um dos mais importante está faltando: a capacidade de adicionar um gradiente num stroke (traçado, borda). Além disso, o efeito do Stroke  não é sempre bacana – por exemplo, quando usamos uma borda com cantos arredondados.

O Fireworks permite especificar a posição do contorno: para fora (outside), ao centro (centered) ou interno (inside), mas os melhores resultados são quando o contorno está para fora.

O contorno pode ser definido com alinhamentos diferentes no painel de propriedades. Contorno alinhado para fora (outside, exemplo3) apresenta melhores resultados que as outras opções para contornos finos.

Mas, nestes casos, recomendo um caminho composto em vez de um contorno para ter mais controle do resultado e para poder aplicar um gradiente.

Comece desenhando dois retângulos com cantos arredondados, um deles, 2 pixels maior que o outro, na altura e largura. Coloque o retângulo menor sobre o maior (você pode verificar se ele está acima, no painel Layers), e diminuir o arredondado da, como mostrado aqui:

O objetivo da forma menor (com o fundo amarelo) é cortar (ou “perfurar”) o interior da forma vermelha, resultando em um objeto com um pixel de largura que pode ser usado no lugar de um contorno. Para isso, selecione os dois retângulos e aperte o “Punch Paths”, no painel Path:

Outra alternativa: você pode selecionar os dois retângulos e vá em Modify > Combine Paths > Punch.

Dica extra: Caso você decida mais tarde que precisa redimensionar esta forma (sem distorcer seus cantos perfeitamente arredondados), a ferramenta “9-slice scaling tool” pode ser sua salvação:

Desenhando Triângulos Melhores:

Os triângulos estão em todos os lugares nas interfaces: setas nos botões, breadcrumbs, indicadores pop-over e assim por diante.

Enquanto o Fireworks oferece recursos vetoriais prontos como a seta e a seta de linha, eu recomendo seguir a rota personalizada e desenhar você mesmo essas formas vetoriais.

O autoshape de seta vetorial no Fireworks. Os pontos de controle amarelos permitem uma customização mais fácil da largura, algura, espessura, tipo de ponta, arredondado, tamanho e mais.

O vetor smart polygon no Fireworks. Você pode facilmente transformar em um triângulo.

Para ilustrar o nosso novo fluxo de trabalho, vamos desenhar uma seta simples como a do botão de início de download:

Botão de início de download.

Vamos começar pelo desenho de um triângulo. Na maioria das vezes, você vai querer um número ímpar de pixels para a base do triângulo de modo que sua ponta fique centralizada a meio-pixel, resultando em uma seta pontiaguda:

À esquerda, o triângulo com largura ímpar. À direita, o triângulo com largura par.

Para criar um triângulo como o da esquerda, começamos por desenhar um simples quadrado com 7×7 pixels usando a ferramenta Retângulo (encontrada no painel Ferramentas, ou simplesmente pressione U). Para excluir seu ponto inferior direito, use a ferramenta Subselection(pressione A, ou use a seta branca no painel Ferramentas), selecione o nó inferior direito, em seguida, pressione a tecla Delete; o Fireworks irá lembrá-lo que você está tentando mudar um ponto de um retângulo primitivo e que deve ser desagrupado para a mudança ocorrer, para isso, clique em “OK” para transformá-lo em um vetor, e apagar o ponto. Após deletado, você ficará com isso:

Nosso quadrado com o ponto inferior direito deletado.

Precisamos agora colocar o ponto inferior esquerdo exatamente no centro, que está localizado a 7 pixels ÷ 2 = 3,5 pixels de sua posição atual. Quando você usa as setas do seu teclado, o Fireworks move os elementos de pixel em pixel e os alinha perfeitamente à grade de pixels. Isto é conveniente, na maioria dos casos, mas não neste. Felizmente, Fireworks nos dá o recurso “Move Points ” (no painel Path) que nos permite especificar valores numéricos:

Mover 3,5 pixels horizontalmente irá centralizar o ponto inferior.

Se o triângulo está um pouco pontiagudo demais para a nossa seta, use a ferramenta Subselection para selecionar o ponto central novamente e pressione a seta para cima do teclado duas vezes para mover o nó.

Estamos quase terminando! Nós precisamos apenas inserir a parte retangular de nossa seta, com 3×5 pixels  e, em seguida, usar o “Union Paths” de comando (Modify > Combine Paths > Union, ou pressionar Control / Command + Alt / Option + U) para soldar os nossos dois caminhos em uma forma vetorial única final:

As formas separadas estão à esquerda e a forma soldada está à direita.

Desenhar Elipses Melhores

Por alguma razão, o Fireworks tem dificuldade em desenhar círculos elegantes (especialmente os pequenos), e os círculos tendem a ter também uma borda em linha reta:

Um círculo padrão no Fireworks. Observe que os lados do topo, da direita, da base e da esquerda não estão arredondados suficientemente.

Nós vamos usar a janela “Numeric Transform” (Control / Command + Shift + T, ou no menu Modify > Transform > Numeric Transform) para fazer o círculo apenas um pouquinho menor:

Diminuir o tamanho do círculo um pouquinho para fazê-lo parecer mais arredondado.

O original à esquerda e nosso resultado depois da transformação à direita. 

Você vai notar que o círculo da direita está mais nítido e regular,  isso porque temos menos pixels  “cheios” nas bordas:

O original à esquerda, e nosso círculo perfeito (depois da transformação) à direita. 

Pontos em Filete

Uma grande recurso do Fireworks que poucas pessoas parecem conhecer é a ferramenta Fillet Points, do painel Path. Basicamente, ele arredonda qualquer ângulo que você selecionar pora um valor que você especifica. Para usá-lo, selecione qualquer forma vetorial e, no painel do Path, seção “Edit Points“, escolha “Fillet Points“:

Fillet Points arredonda todos os seus ângulos.

Vamos usar a forma pronta de Estrela vetorial padrão como um exemplo. Note que você precisa desagrupar formas prontas e retângulos primitivos antes de usar o Fillet Points, feito isso, você pode selecionar a forma vetorial inteira para arredondar todos os cantos de uma só vez ou usar a ferramenta Subselection para selecionar determinados pontos para arredondar.

A forma original à esquerda, e com o Fillet Points aplicado à direita.

Isto pode representar uma enorme economia de tempo quando você quiser modificar formas complexas com muitos filtros e efeitos. Agora você não terá que redesenhar as formas de novo e de novo, só porque o raio está alguns pixels cortado.

Caminhos Internos

Outra ferramenta vetorial muito útil desconhecida pelos designers é a Inset/Expand Paths.

Inset/Expand Paths é também acessada via menu Modify > Alter Path > Inset Path.

Como você já deve ter adivinhado pelo seu nome, esta ferramenta permite que você altere um caminho vetorial e torne-o menor (inset) ou maior (expand), sem perder suas proporções.

Vamos dizer que nós queremos fazer a nossa estrela acima com 10 pixels a menos:

O comando Inset/Expand Paths.

Esta caixa de diálogo pode ser confusa se você não sabe o que todas as opções e abreviaturas significam. O terceiro parâmetro (“corners” – cantos) é o menos óbvio, porque o significado de “BE, RO, MI” não está definido. As letras são as abreviações de “Bevel“, “Round” e “Miter“. Você não pode usar essas abreviações no campo de texto, de modo que você precisa saber o que significam. “Bevel” cria cantos quadrados, “Round” cria cantos arredondados, e “Miter” cria cantos pontiagudos, o “Miter limit” especifica o comprimento máximo dos cantos pontiagudos antes do Fireworks substituí-los com as pontas cortadas (ou quadrado). Vamos usar “Miter“, em nosso exemplo, porque nós obviamente queremos manter nossas linhas retas.

E voilà!

Gradient Dither

Adicionar um gradiente entre duas cores semelhantes (cores próximas em matiz) em uma forma grande, muitas vezes produz um efeito desagradável de estrias, como mostrado aqui:

Banding (efeito de estrias) é visível neste gradiente,  especialmente em telas LCD do tipo “twisted nematic”, que exibe apenas 6bits por pixel e não 8.

Para evitar isso, no Fireworks CS5 foi introduzida a opção Gradient Dither que pode ser usada como se as bordas do objeto forem definidas como “Anti-alias” e se você usar o tipo “Radial” ou tipo “Linear”, para preenchimento de gradiente. fill.

Gradient Dither (localizado no painel Properties) fazem com que os gradientes pareçam melhores.

O resultado é um gradiente suave, único e linear, semelhante ao que você teria no navegador com aplicação do CSS:

Com a opção “Dither” aplicada, o gradiente fica muito mais suave.

Da mesma forma bons resultados podem ser alcançados por gradientes radiais.

Evitar Sombras Grandes

Fireworks não é muito bom em renderizar grandes sombras (se você usa o filtro “Drop Shadow“). Se você está curioso sobre as sutilezas envolvidas, um artigo detalhado no WebDesignShock compara efeitos de sombra e brilho  no Fireworks, Photoshop e Illustrator.

Em vez de uma bela sombra que desaparece lentamente para um valor transparente, a borda da sombra pode parecer que foi cortada antes de desaparecer completamente com a transparência. A questão é particularmente visível na versão do Fireworks para Mac:

O efeito de sombra criado com o filtro Drop Shadow. Observe as laterais (no fireworks CS5 para Mac) – eca!

Aqui estão as configurações para usar para obter este efeito de sombra no Windows e Mac:

Configurações para o efeito drop-shadow no Mac. De novo, observe o corte nas pontas das sombras.

Configurações para o efeito drop-shadow no windows. As configurações são as mesmas, mas as pontas das sombras estão quase perfeitas.

Então, em vez de usar um filtro, eu costumo duplicar a forma (o retângulo branco neste exemplo), definindo sua margem para “Feather” e preenchendo-o com preto.

Configurações possíveis para a “sombra” vetorial atrás do objeto.

Colocando esta forma atrás do retângulo branco, produz-se uma sombra mais bonita e maior do que com o método interno:

A sombra original à esquerda e o “método feather” à direita.

 

Exemplos Práticos

Falar sobre gradientes, preenchimentos, contornos, formas automáticas vetoriais, retângulos arredondados, pixels e meios-pixels é emocionante, mas alguns exemplos reais seriam ainda melhores. Abaixo estão algumas ilustrações, ícones e desenhos de interface do usuário que eu fiz exclusivamente com o Fireworks. As dicas e truques faladas anteriormente fizeram os resultados mais elegantes e refinados.

Ícone pasta de arquivos.

Interface de usuário para selecionar data.

Ícone Free – Grátis.

Ícones para um FAQ – Frequently Asked Questions / perguntas feitas com frequência.

Ícone envelope.

Conjunto de ícones monocromáticos.

Ícones de chamada.

Ícones de contas de email.

Barra de ferramentas com navegação por ícones.

Como você pode ver, tem tudo a ver com precisão de pixel, e o Fireworks produz grandes resultados!

Conclusão

O Adobe Fireworks é uma ferramenta poderosa, oferecendo recursos de edição de vetores e imagens e até escondendo algumas preciosidades. Sim, ele impõe um fluxo de trabalho diferente, e alguns de seus efeitos padrão são decepcionantes, mas as vantagens superam os pequenos equívocos aqui ou ali.

Ter que mudar hábitos de trabalho é sempre frustrante. Talvez algumas ações que você faz em poucos minutos com sua ferramenta tradicional de design agora lhe pareçam incrivelmente lentas. Acostumar-se a um fluxo de trabalho diferente leva tempo, e pode ser que você não veja, de imediato,a vantagem de usar o Fireworks. A melhor coisa que você pode fazer é comprometer-se a fazer UM projeto real, do início ao fim, usando apenas o Fireworks. Escolha um projeto pequeno ou um projeto pessoal para este fim e coloque as mãos na massa por algumas horas (ou alguns dias). É a única maneira de ser capaz de julgar se o Fireworks realmente se adapta às suas necessidades. Se você estiver trabalhando com design de interface, eu aposto que o Fireworks será uma excelente ferramenta!

Se você estiver interessado em aprender mais sobre Fireworks, eu recomendo assistir aos vídeos produzidos por Rogie King. Eles oferecem muitas dicas e truques para refinar projetos e obter resultados mais ainda mais precisos do que neste artigo.

Além disso, o trabalho dos outros pode ser uma boa fonte de inspiração e conhecimento, portanto, dê uma olhada na série Fw PNG Week de Craig Erskinee baixe e desconstrua seus arquivos fonte gratuítos.

Feliz experiência com Fireworks!

Galerinha linda 🙂

Vou encerrando por aqui e espero novamente ter contribuído e despertado a imaginação de todos.

Este post também está publicado no grupo ADOBE FireworksBR:

http://fireworksbr.groups.adobe.com/index.cfm?event=post.display&postid=42888

Vocês podem passar por lá para conhecer mais do Fireworks e de quebra, podem se inscrever para participar dos nossos sorteios de brindes.

Agradeço pela atenção e até nosso próximo post!

Beijos,

Marta Roberta Teles