Novos Recursos Edge Animate: Responsive Scaling e Center Stage

Postado em Adobe Creative Cloud, Adobe Edge Animate, Edge Animate, EdgeAnimateBR por Marta Roberta Teles

Olá, pessoal!

Hoje quero falar um pouquinho dos novos recursos nativos do Edge Animate CC:

Responsive Scaling e Center Stage.

O Responsive Scaling nos permite transformar nosso projeto com dimensões fixas em um projeto responsivo, se adaptando a qualquer resolução de tela.

O Center Stage, como o próprio nome já diz, posiciona nosso projeto exatamente no centro da tela.

Para iniciar nosso projeto, eu defini valores fixos ao Stage (900 x 400 pixels).

Importei as imagens necessárias para a biblioteca de imagens.

Neste projeto, apenas uma imagem de background e uma imagem de bolha.

Criei um símbolo com a bolha no Edge Animate e dentro do símbolo, fiz várias cópias da mesma imagem, redimensionando-as também.

Com as bolhas prontas e antes de iniciar o deslocamento de posição, habilitei os “motion paths”, para criar caminhos em curvas para a subida das bolhas.

Após o deslocamento das bolhas ao topo (marcação na timeline de 0 a 3 segundos), comecei a curvar os caminhos.

Repare que nesta nova versão, quando aproximo o cursor do mouse do caminho a ser alterado, posso visualizar os atalhos para edição do path.

Após a finalização dos paths, iniciei o deslocamento de tempo das bolhas na timeline, para criar um efeito mais real das bolhas sendo carregadas de baixo para cima.

Terminada a animação dentro do símbolo, precisei retornar ao Stage para também animar as bolhas.

Fiz uma animação também de 3 segundos, movimentando o símbolo das bolhas da esquerda para a direita e para melhorar um pouco mais, desloquei do rodapé para o topo também.

Terminada a animação, precisamos inserir as”actions” diretamente no “Stage”, para criarmos um efeito “Parallax” no deslocamento hotizontal.

Primeiro, iremos capturar os movimentos do mouse (eventX e eventY).

Depois precisaremos “informar” à timeline, qual será o deslocamento e o tempo (neste caso, 3 segundos).

Neste ponto já poderemos testar nossa animação, mas não se esqueça que para ficar legal de verdade, é necessário inserir uma ação de loop (play from), para a timeline e para o símbolo.

Com a ação, teremos um efeito de loop e poderemos testar o parallax por repetidas vezes.

Para finalizar e dar um acabamento com as novas funcionalidades, poderemos habilitar as opções de Responsive Scaling e Center Stage (ambos na horizontal), para a “finalização responsiva” do nosso projeto.

Terminado o nosso projeto, é só publicar e ser feliz 😀

Espero ter contribuído com a galerinha daqui e brevemente postarei sobre uma outra nova funcionalidade: áudio nativo no Edge Animate CC.

Por hoje vou me despedindo, mas peço a todos que compartilhem idéias e gostaria de ver algumas até publicadas por aqui ou lá no grupo oficial com essas funcionalidades.

Link do grupo Adobe Edge Animate BR:

http://edgeanimatebr.groups.adobe.com/

Segue o link para baixar o exemplo e testar 😀

Baixar Demo.

Redimensione sua tela do browser, deslize o cursor do mouse para a esquerda e para a direita e, visualize o efeito parallax.

Bjs para todos e obrigada 🙂

Marta Roberta Teles

28nov2013

Inaugurando o Grupo Oficial Adobe Edge Animate BR

Postado em Adobe Edge Animate, Edge Animate, HTML5 com CSS3, Tecnologia por Marta Roberta Teles

Olá, pessoal!

É com muita alegria que venho comunicar a criação do novo grupo Adobe Edge Animate BR:

http://edgeanimatebr.groups.adobe.com/

Estão todos convidados para conhecer esta fantástica nova ferramenta da Adobe que nos possibilita a criação de banners, apresentações, projetos interativos, infográficos e muitas, mas muitas animações fantásticas.

Totalmente adaptado para os browser modernos, o Edge Animate tem como arquivos finais o HTML5 com CSS3 e Javascript.

Para participar do grupo, você precisará possuir ou cadastrar uma nova Adobe ID.

Para saber como cadastrar uma Adobe ID ou ainda para tirar algumas dúvidas, acesse a página de ajuda: HELP ADOBE.

Aproveite e conheça um pouco mais das idéias e normas do grupo para uma boa convivência em grupo, visitando a nossa página ABOUT.

Fique à vontade para participar e interagir neste grupo.

A idéia é criarmos nossos próprios conteúdos, compartilharmos idéias e podermos desenvolver assuntos desde o nível básico, até o avançado.

No grupo Edge Animate BR você poderá participar enviando suas dúvidas ou sugestões através do nosso Fórum ou acompanhando e interagindo através dos nossos Posts.

Lembrando que para participar e receber as atualizações do grupo ou dos nossos encontros presenciais e on line, você precisará registrar-se neste grupo com a sua Adobe ID.

Participe, divulgue e aprenda muito mais.

Participe também e acompanhe nosso grupo nas redes sociais:

Facebook & Twitter

Sempre com muitas novidades!

Abs,

Marta Roberta Teles

31out2013

Palestra Adobe Edge Animate CC – 23/10/2013

Postado em Adobe Edge Animate, DRC Treinamentos, Edge Animate por Marta Roberta Teles

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 😉

4set2013

10 Razões para usar o Adobe Edge Animate CC

Postado em Adobe Edge Animate, Design Responsivo, Edge Animate, HTML5 com CSS3 por Marta Roberta Teles

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!

13jul2013

Mentir pra si mesmo é sempre a pior mentira

Postado em Adobe Edge Animate, Edge Animate, Flash, Tecnologia por Marta Roberta Teles

Olá, galerinha que me acompanha!

Estava lendo umas coisinhas aqui e outras ali, quando me lembrei das perguntas que as pessoas me fazem com relação às mudanças no meu estilo de vida.

Por coincidência ou não, me deparei com uma história muito parecida com a minha trajetória de vida, o que me inspirou de vez a escrever este post.

Por volta dos meus 20 aninhos, eu havia traçado uma meta na minha vida: trabalhar e crescer em uma grande empresa, ter alguma experiência viajando, um cargo de destaque e lógico que não poderia faltar, “casa, comida e roupa lavada” (risos).

Depois de ter alcançado estes meus objetivos, ficou a questão do “e agora, o que mais?” Este desafio não me preenchia mais, sentia um grande vazio, uma desmotivação enorme.

Fiquei mais de um ano sem saber a resposta para a desmotivação que eu sentia mesmo tendo atingido tudo o que havia desejado. Para ser mais objetiva diria que o mais difícil foi admitir para mim mesma que precisava buscar outro caminho.

Eu já sabia que não seria nada fácil, mas com certeza me faria mais feliz.

Nesta época trabalhava somente na cidade de São Paulo, mas tinha uma vontade enorme de mudar… mudar mesmo!

Mudar de trabalho, mudar de cidade, mudar, mudar! Queria mudar minha rotina completamente! Conhecer lugares, coisas e pessoas novas.

Foi então que paralelamente a minha faculdade e ao meu trabalho fixo da época, comecei a investir muito mais nos estudos, fazendo treinamentos também.

Resolvi partir de vez para as ferramentas Adobe, como o Flash (meu amor a primeira vista), Photoshop, Dreamweaver, Illustrator e Fireworks… Atualmente, acrescento à lista, o Adobe Edge Animate e o Muse.

Ficava fascinada quando via uma animação ou um belo job na web e queria saber mais e mais.

Passei a estudar programação e a cada novo trabalho que eu era capaz de executar, sentia-me realizada!

Estava eu entrando de cabeça no mundo Front-End…

Fiz vários freelas (continuo fazendo, ok? risos).

Com esses trabalhos paralelos ao emprego fixo que eu tinha, pude dar um tempo para mim também.

Engravidei da minha filha e não pensei duas vezes… lá fui me aventurar nos “freelas” das agências e, em uma licença não remunerada por dois anos.

Sabia que deveria mudar meu caminho, mas não sabia se o caminho que eu havia escolhido era o caminho certo. Algumas vezes a grana era tão curta que pensava em desistir dos treinamentos e cancelar minha licença, mas logo caí na real e percebi que havia levado 10 anos para chegar onde havia chegado e que agora precisava me dar mais tempo e não me cobrar tanto para ter resultados mais concretos.

Logo depois desse período, ainda voltei a trabalhar na mesma empresa por mais seis meses e, finalmente, cheguei a definitiva conclusão de que se uma pessoa não está feliz, se esforça muito para ir trabalhar todos os dias, não vê sentido no que faz, não tem um propósito a ser atingido com seu trabalho e o único foco do trabalho é pagar as contas, é preciso repensar. Neste caso, é preciso levar em consideração o que se deseja de verdade, e quantos passos para trás serão permitidos pela sua estrutura de vida.

É importante também ter um plano de ação para a mudança, um forte apoio familiar e por que não um apoio terapêutico se for o caso? O caminho não é nada fácil!

Eu tenho o costume de dizer que uma pessoa de 40 anos hoje em dia vive facilmente até os 80, ou seja, porque não mudar? Dez anos bem vividos valem mais do que 60 anos de frustração.

Mudem! Mudem de casa, de carro, de carreira, de parceiro, mas sejam fiéis a si mesmos, aos seus valores e a tudo que acreditem.

Eu mudei!

Marta Roberta Teles é Instrutora de desenvolvimento e criação com as ferramentas Adobe

Hoje sou Instrutora e palestrante Front-End com as ferramentas Adobe e, sinceramente, minha ocupação atual é uma experiência maravilhosa.

A cada dia, a cada turma e a cada aula eu percebo o quanto consigo agregar à vida das pessoas através do meu prazer de ensinar e da didática que tanto estudei e, modéstia a parte, nem sabia que já a tinha por puro descuido da natureza… risos…

Agradeço a Deus por todas estas conquistas e também às pessoas maravilhosas (todas saberão quem são sem que eu cite nomes… risos…) que estiveram ou estão ao meu lado, sempre me ajudando, motivando, apoiando e me impulsionando para o crescimento e aprendizado de todo dia.

Sinto-me realizada por ter descoberto o que realmente me faz feliz e mais ainda, por ter o privilégio de ensinar e aprender o que ensino (tá bom…. tá bom… adaptado da frase do grande mestre Guimarães Rosa).

O que move o mundo é a mudança, então por que não sermos os agentes que impulsionam o mundo?

Aproveito este post para compartilhar uma galeria de fotos, com momentos mais que especiais, sempre guardados na memória e no coração.