Animações e ferramentas virtuais

Animações e Ferramentas Virtuais
W
B
A
0
17
6
_
V
1.
1
2/219
Animações e Ferramentas Virtuais
Autoria: Leandro Felipe Carvalho
Como citar este documento: CARVALHO, Leandro Felipe. Animações e Ferramentas Virtuais. Vali-
nhos: 2016.
Sumário
Apresentação da Disciplina 04
Unidade 1: Flash CS6, utilização e configuração 06
Assista a suas aulas 34
Unidade 2: Criando uma animação 41
Assista a suas aulas 58
Unidade 3: Exibição de filme 65
Assista a suas aulas 81
Unidade 4: Animações com interpolação 88
Assista a suas aulas 108
2/219
3/2193
Unidade 5: ActionScript 115
Assista a suas aulas 133
Unidade 6: Interatividade com ActionScript 140
Assista a suas aulas 160
Unidade 7: Utilizando as bibliotecas 167
Assista a suas aulas 188
Unidade 8: Formulários e CANVAS 195
Assista a suas aulas 212
Sumário
Animações e Ferramentas Virtuais
Autoria: Leandro Felipe Carvalho
Como citar este documento: CARVALHO, Leandro Felipe. Animações e Ferramentas Virtuais. Vali-
nhos: 2016.
4/219
Apresentação da Disciplina
Esta disciplina tem como objetivo apresen-
tar a você o funcionamento das animações e 
suas aplicações. Atualmente, as animações 
podem ser utilizadas em diversos contextos 
e não somente como atrativos em páginas 
da web. O profissional que entende de ani-
mação é capaz de trabalhar no desenvolvi-
mento de games ou mesmo criar produtos 
para a área de marketing digital.
Durante o desenvolvimento deste curso, 
você terá contato com a ferramenta Adobe 
Flash, a qual oferece recursos para o de-
senvolvimento de animações com os mais 
diversos níveis de complexidade. É sempre 
importante lembrar que o desenvolvimento 
de uma boa animação depende também da 
criatividade do animador e, muitas vezes, de 
recursos externos, assim como imagens bem 
utilizadas.
Vamos iniciar os estudos conhecendo o am-
biente do aplicativo e entendendo como fun-
cionam as animações quadro a quadro. Essas 
animações são as utilizadas pelos desenhos 
animados que conhecemos. Paulatinamen-
te, iremos entender como as animações de 
média complexidade são criadas através de 
efeitos conhecidos, dentre eles podemos 
destacar a interpolação de forma e a inter-
polação de movimento, que fazem objetos 
se movimentarem pela nossa animação de 
uma maneira mais simples.
Para complementar os nossos estudos em 
animações, vamos entender um pouco sobre 
a linguagem ActionScript, que é a linguagem 
que se utiliza para gerar interatividade nas 
animações, isso permite que o usuário tenha 
respostas diferentes ao clicar ou selecionar 
objetos distintos. Existem diferentes versões 
5/219
de ActionScript, você será capaz de diferen-
ciá-las após os estudos desta disciplina, para 
escolher a melhor versão para aplicar em 
suas animações.
Serão diversos conteúdos diferentes estuda-
dos. É muito importante que você lembre de 
praticar, realizando todos os exercícios pro-
postos com dedicação.
6/219
Unidade 1
Flash CS6, utilização e configuração
Objetivos
1. Estabelecer os requisitos e passos ne-
cessários para a instalação do aplica-
tivo.
2. Conhecer seu ambiente de trabalho e 
as opções básicas.
Unidade 1 • Flash CS6, utilização e configuração7/219
Introdução 
Com o presente material, você conhecerá 
algumas ferramentas utilizadas para o de-
senvolvimento de animações e desenhos 
web. Como primeiro contato, será apresen-
tado o aplicativo Adobe Flash CS6, aclamado 
como uma das ferramentas mais versáteis 
para a web. Em meio às novas ferramentas 
voltadas para animação, o Flash conquistou 
um espaço importante e tornou-se um dos 
produtos de maior sucesso da Adobe, junto 
com o Photoshop, devido à sua versatilida-
de em desenvolvimento de animações.
Em suas versões mais antigas o Flash ofe-
recia apenas recursos para animação em 
páginas de internet. O tempo e a deman-
da crescente por mais qualidade fizeram 
com que a Adobe investisse pesado, e logo 
o programa ganhou uma “cara nova”, além 
de dezenas de funções que fizeram com que 
ele deixasse de ser um programa de design 
para se tornar praticamente uma platafor-
ma de desenvolvimento. O Flash, juntamen-
te com a plataforma AIR, permite o desen-
volvimento de aplicações para plataformas 
móveis como Android e IOs. 
Link
A tecnologia AIR permite o desenvolvimento de 
aplicações multiplataforma sem a necessidade 
de alteração em códigos de desenvolvimento. Se 
você quer conhecer mais sobre a tecnologia do 
AIR, que tal dar uma olhada neste artigo do site 
TechTudo. Disponível em: <http://www.tech-
tudo.com.br/tudo-sobre/adobe-air.html>. 
Acesso em: 10 nov. 2016.
http://www.techtudo.com.br/tudo-sobre/adobe-air.html
http://www.techtudo.com.br/tudo-sobre/adobe-air.html
Unidade 1 • Flash CS6, utilização e configuração8/219
1. Conhecendo o Aplicativo
1.1 A instalação do Adobe Flash 
CS6
O Flash CS6 pode ser instalado diretamente 
do CD da Adobe Master Collection CS6.
• Para instalar o Adobe CS6:
01. Insira o CD do Adobe Flash CS6, ou da 
Master Collection, na unidade de CD-
-ROM.
02. Escolha Iniciar > Executar. Clique em 
procurar e selecione o arquivo Insta-
lador do Flash CS6.exe no CD. Ao sur-
gir a caixa de diálogo executar, clique 
em OK para iniciar a instalação.
• Requisitos mínimos de sistema:
• Processador Intel® Pentium® 4 ou 
AMD Athlon® 64.
• Microsoft Windows Vista® Home Pre-
mium, Business, Ultimate ou Enterprise 
com Service Pack 1, Windows 7, Win-
dows 8, Windows 8.1 ou Windows 10.
• 1GB de RAM (recomendável 2GB).
• 3.5 GB de espaço livre em disco para a 
instalação; será necessário espaço li-
vre adicional durante a instalação (não 
é possível instalar em dispositivos de 
armazenamento removíveis flash).
• Resolução de 1024 x 768 (recomen-
da-se 1280 x 800) com placa de vídeo 
de 16 bits.
Unidade 1 • Flash CS6, utilização e configuração9/219
• Unidade de DVD-ROM.
• Software QuickTime 7.6.2 necessário 
para recursos multimídia.
• Conexão banda larga com a internet 
necessária para serviços on-line.
NOTA: O CD da Adobe Master Collection 
possui autorun, basta colocá-lo no com-
putador e aguardar alguns segundos que 
a instalação se iniciará automaticamente.
1.2 Iniciando o Flash CS6
Após realizada a instalação do Adobe Flash 
CS6 em seu computador, ele deverá estar 
localizado no Menu Iniciar.
Para utilizá-lo clique em Iniciar na barra 
de tarefas, aponte para Programas, depois 
para a opção Adobe Master Collection CS6 
e, por fim, clique na opção Adobe Flash Pro-
fessional CS6.
NOTA: Os novos ambientes Windows (Ver-
são 8, 8.1 e 10) podem trazer o aplicativo 
em grupos diferentes, para localizar basta 
utilizar o recurso de pesquisa do sistema 
operacional e digitar apenas “Flash”, ele 
direcionará ao executável do programa.
2. O Ambiente de Trabalho
2.1 A tela de boas-vindas
Após abrir o aplicativo será exibida a tela de 
boas-vindas, nesta janela podemos encon-
trar basicamente três colunas:
Unidade 1 • Flash CS6, utilização e configuração10/219
• A primeira coluna permite a criação 
de documentos com base em modelos 
(templates) para facilitar o desenvol-
vimento de novas animações. Nesta 
coluna também temos a opção “abrir” 
que permite a escolha de um arquivo 
anteriormente criado.
• A coluna central traz as opções para a 
criação de um novo arquivo flash com 
base na finalidade para a qual quere-
mos utilizar este arquivo.
• E a última coluna apresenta uma sé-
rie de tutoriais para conhecer o uso do 
aplicativo, estes tutoriais levam ao site 
da Adobe e normalmente apresentam 
vídeos em inglês para explicações de-
talhadas.
Unidade 1 • Flash CS6, utilização e configuração11/219
Figura 1 | A tela de boas-vindas
Fonte: elaborado pelo autor.
Unidade 1 • Flash CS6, utilização e configuração12/219
2.2 Entendendo os espaços de 
trabalho
Na tela de boas-vindas, vamos selecionar 
a opção localizada na coluna central Criar 
novo >> ActionScript 3.0. 
Figura 2 - Criando um novo arquivo no Flash
Fonte: elaborado pelo autor.
Após selecionado o tipo de arquivo, o Adobe 
Flash CS6 carregará