iwtraining

Primeiros passos no Adobe Edge Animate Edge Animate

Primeiros passos no Adobe Edge Animate

No Adobe Edge Animate, o palco é onde você organiza o layout de seus elementos, e o painel Elements determina a ordem de sobreposição. O painel Timeline gerencia o modo como esses elementos mudam ao longo do tempo. Outros painéis permitem que você edite e controle sua composição.

Abrindo o Adobe Edge

No lado esquerdo do painel estão os botões para abrir um arquivo ou criar um novo arquivo.

1. Escolha File > New. O Edge Animate cria um novo documento, sem título, com um tamanho padrão de 550px de largura por 400px de altura.

2. Escolha File > Save para salvar o projeto, mesmo que ainda bem no início. Navegue até a pasta “Unidade01” e dê ao arquivo o nome de “BannerSimples”.

3. Abra o Finder (ou Explorer, Windows) e navegue até a pasta onde você salvou o arquivo. Note que alguns recursos já foram criados para você. Basicamente, são arquivos JavaScript e HTML. Também vemos o arquivo do Adobe Edge, que possui a extensão .an.

EdgeAnimate_01

4. Volte ao Adobe Edge.

Conhecendo o espaço de trabalho

O espaço de trabalho do Adobe Edge Animate inclui os menus de comando no topo da tela e uma variedade de ferramentas e painéis para editar e adicionar elementos à sua composição. Você pode criar objetos ou importar eles de outros programas que utililize, como Adobe Photoshop ou o Adobe Illustrator.

Por padrão, O Adobe Edge Animate exibe a barra de menu e o painel Ferramentas na parte superior. Do lado esquerdo, exibe o painel de Properties. Na parte inferior temos a Timeline, Elements, Library. No centro, fica o Stage, palco, onde tudo acontece!

EdgeAnimate_02

1. Para que possamos alterar os valores da altura e da largura de forma independentes, desmarque o link entre essas duas propriedades.

2. Em seguida, defina W: 400px e H: 300px.

3. Altere a cor do fundo (background) para preto rgba(0,0,0,1.00).

EdgeAnimate_03

4. Dê a sua composição o nome “Banner Simples Comp”.

EdgeAnimate_04

Depois de configurar as propriedades básicas do seu projeto, precisamos criar os elementos visuais que serão animados. Um elemento é qualquer objeto importado ou criado no Adobe Edge. O Adobe Edge Animate pode exibir e animar uma variedade de gráficos e imagens importadas, como PNG, JPEG e outros arquivos de bitmap, além de gráficos vetoriais escaláveis ​​(arquivos SVG).

1. Escolha a ferramenta retângulo.

2. Desenhe um retângulo com a mesma altura do Stage, arraste do início do palco e deixe sua largura até a metade da tela.

3. Defina a cor de preenchimento do retângulo como rgba(0,8,117,1.00).

EdgeAnimate_05

4. Note que o painel Elements mostra o Stage como sendo uma div e, dentro do Stage, outra div, que é o retângulo que você acabou de desenhar.

5. Dê um duplo clique no nome do elemento Rectangle para renomear. Dê a ele o nome de cover.

6. Caso seu retângulo não tenha ficado do jeito correto, você pode entrar com os valores manualmente. Para isso, selecione o elemento e, no painel Properties, defina as devidas características.

EdgeAnimate_06

7. Utilizando a ferramenta Text, adicione o  texto “Adobe Edge Animate”. Ajuste o a cor dele para branco e o tamanho para 35px. Além disso, altere a fonte para Georgia. Ao final, ajuste o quadro para que a parte “Animate” fique na linha debaixo. Para isso, mova os pontos da caixa.

EdgeAnimate_07

8. Renomeie o elemento que contém o texto para “logo” e arraste ele para que fique abaixo do elemento cover. Elementos que estão acima, tem prioridade de visibilidade em comparação com os que estão abaixo. O funcionamento é semelhante ao das tão conhecidas camadas (layers).

Está com duvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário