Baixe o app para aproveitar ainda mais
Prévia do material em texto
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áo arquivo e exibirá o es- paço de trabalho Essenciais, este é o espaço de trabalho padrão. Para alterá-lo, pode- mos clicar sobre o alternador de espaços de trabalho, localizado próximo à barra de pes- quisa no canto superior direito e escolher o que melhor se adeque às suas necessidades, como mostra a Figura 3. Unidade 1 • Flash CS6, utilização e configuração13/219 Figura 3 | Seletor do espaço de trabalho no Adobe Flash CS6 Fonte: elaborado pelo autor. O espaço de trabalho Essenciais traz as ferramentas para o uso mais comum do aplicativo. Des- se modo, ele será utilizado como base durante as aulas de Flash. A única mudança proposta neste ambiente será a movimentação da barra de ferramentas que, originalmente, encontra- Unidade 1 • Flash CS6, utilização e configuração14/219 -se localizada do lado direito da janela para o lado esquerdo, de forma a tornar seu uso mais intuitivo, como em outros programas, por exemplo, o Adobe Photoshop ou o Corel Draw. Para tal, basta clicar na barra de fer- ramentas e movê-la com o cursor do mouse de um lado para o outro da tela até sua fixa- ção. 2.3 Conhecendo o Ambiente de Trabalho (Essenciais)1 Observe os itens identificados no ambiente de trabalho mostrados na Figura 4. 1 Apenas a barra de ferramentas foi posicionada na lateral es- querda da tela, o restante segue o padrão oficial da Adobe. Unidade 1 • Flash CS6, utilização e configuração15/219 Figura 4 | Ambiente de trabalho do Flash CS6 Fonte: elaborado pelo autor. Unidade 1 • Flash CS6, utilização e configuração16/219 Barra de menus apresenta os princi- pais menus para operação do aplicativo dos quais trataremos a seguir. Ambiente de trabalho permite realizar a seleção do ambiente de trabalho como visto no item 2.2. Encontramos também a opção Reinicializar ‘...’ que trará o ambiente a suas configurações padrão. Caixa de pesquisas procura informações na ajuda padrão do aplicativo. Linha do tempo ela exibe as informações sobre a duração do filme em Flash e sobre as camadas utilizadas para trabalho. Palco é a área de edição do Flash, é nele que iremos construir nossa animação. Os elementos que são exibidos no palco apare- cem na animação gerada, as áreas laterais servem como apoio aos objetos e não exi- bem nada. Grupo de painéis são conjuntos de pai- néis inter-relacionados sob um cabeçalho. Para expandir um grupo de painéis, clique no ícone que o representa, nele serão exibi- dos o painel selecionado e em abas ao lado os outros painéis que podem ser seleciona- dos conforme mostra a Figura 5. Unidade 1 • Flash CS6, utilização e configuração17/219 Figura 5 | Grupo de painéis (selecionado e adjuntos) Fonte: elaborado pelo autor. Unidade 1 • Flash CS6, utilização e configuração18/219 Inspetor de propriedades nela são exibidas todas as informações dos objetos, clipes de filme ou mesmo documento, de acordo com a seleção e podem ser realizadas alterações. Junto, pode- -se notar as opções de publicação do filme. Caixa de ferramentas nela você encontrará as ferramentas necessárias para a realização dos trabalhos em Flash. Exibida por padrão do lado direito e movimentada para o lado esquerdo. Co- nheceremos as ferramentas posteriormente. 2.4 Conhecendo as Barras do Flash CS6 Barra de menus Figura 6 | A barra de menus Fonte: elaborado pelo autor. Existem onze menus no Flash CS6. Neles estão as ferramentas importantes para a criação de novos projetos, como a conversão de gráficos para símbolos, a publicação de arquivos em vários formatos, aplicação de efeitos, organização, entre outras. Você terá, agora, uma visão geral dos principais menus. Unidade 1 • Flash CS6, utilização e configuração19/219 Arquivo: como em outros programas, nele estão as opções para abrir, criar e salvar projetos, e também as opções para gravar e publicar. Neste menu, você pode importar arquivos externos: sons, imagens e vídeos; e também exportar animações e imagens para outros formatos; além de imprimir as imagens geradas. Editar: menu para a edição. Traz diversos comandos relacionados ao desenvolvimen- to do filme, como Desfazer e Refazer, Co- piar e Colar; além daqueles relacionados à edição geral e específica para o Flash, por exemplo, a edição de símbolos. Exibir: conta com as opções de zoom, ré- guas, grades, guias; as ferramentas para fa- cilitar a sua vida no que diz respeito à área de trabalho. Inserir: este é um dos menus mais impor- tantes do Flash. Com ele é possível inserir camadas e quadros e converter imagens em símbolos, entre várias outras ações. Modificar: neste menu você irá interagir de forma direta com os elementos do seu filme, principalmente com as camadas e as cenas. Por meio dele também é possível usar fun- ções para alinhar, ordenar os objetos e tam- bém agrupá-los e, ainda, fazer transforma- ções do tipo redimensionamento e rotação. Texto: menu para formatação de texto, você pode definir tamanho, fonte, estilo e alinha- mento dos textos inseridos no vídeo. Dessa forma, eles ficarão mais agradáveis para a visualização. Unidade 1 • Flash CS6, utilização e configuração20/219 Comandos: permite a automação de tare- fas e traz ferramentas para a exportação de movimentos em XML. Controlar: é o menu responsável pelo con- trole para as animações e programas feitos no Flash, com os comandos deste menu, é possível realizar testes dos projetos para verificar se “rodam” corretamente. Depurar: neste menu podemos realizar tes- tes de códigos relacionados ao ActionS- cript, além do monitoramento de variáveis e objetos. Janela: exibe todas as janelas abertas no momento. Nele também, você pode esco- lher as barras de ferramentas e os painéis que devem aparecer na área de trabalho. Ajuda: utilizado em caso de dúvidas. Nele é possível acessar tópicos úteis para auxi- liá-lo em tarefas mais complexas. O Adobe Flash conta com exclusivos tutoriais volta- dos para os utilizadores de Flash. A caixa de ferramentas Na caixa de ferramentas você irá encontrar todas as ferramentas e suas opções neces- sárias para o trabalho com gráficos e for- mas como: caneta, lápis, borracha, balde de tinta, pincel, entre outros. Ao entrar no Flash, você vai perceber que a barra fica ao lado direito da tela e normal- mente é exibida em uma única coluna, para movê-la basta clicar na parte superior da caixa e arrastá-la. Unidade 1 • Flash CS6, utilização e configuração21/219 Figura 7 | A caixa de ferramentas Fonte: elaborado pelo autor. Veja agora uma lista de ferramentas dispo- níveis e o que elas fazem. Ao lado do nome de cada uma, será exibida a tecla de atalho para acesso. Seta [V]: principal ferramenta de seleção. Com ela é possível movimentar os objetos e até mesmo fazer alterações específicas na Para saber mais Olhe para a parte inferior da caixa de ferramen- tas. Veja que a última seção é variável e é cha- mada opções. Esta seção apresenta as opções disponíveis para cada ferramenta, pois para cada uma que você seleciona, as opções mudam. Ex- perimente alterar entre as ferramentas e veja as opções que aparecem. Unidade 1 • Flash CS6, utilização e configuração22/219 estrutura deles. Ao ativar esta ferramenta, aparecem três variações na seção Opções: Figura 8 | A caixa de ferramentas Fonte: elaborado pelo autor. 1. Encaixar: permite que todos os obje- tos se atraiam entre si. 2. Suavizar: é capaz de tornar as linhas mais suaves, arredondadas. 3. Acertar: deixa as formas com ângulos mais acentuados. Subselecionar [A]: esta ferramenta permite que você altere figuras em lugares estraté- gicos. Não há opções para esta ferramenta. Linha [N]: serve para traçar linhas. Para usar esta ferramenta, basta dar um clique no ponto em que você quer que ela comece e outro no ponto em que ela deve terminar. A ferramenta Linha não tem opções, mas é possível alterar suas propriedades, no Ins- petor de propriedades. Laço [L]: é a ferramenta de recorte do Flash. Com ela é possível recortar figurascom pre- cisão para fazer ajustes e até mesmo criar novas formas a partir de uma figura já exis- tente. Caneta [P]: com ela é possível desenhar li- nhas e curvas de forma similar ao mundo real. Desse modo, você pode obter melho- res efeitos em desenhos, diferente da edi- ção sistemática das linhas. Unidade 1 • Flash CS6, utilização e configuração23/219 Texto [T]: similar a outros aplicativos, esta é a ferramenta de texto do Flash. Com ela você pode adicionar e formatar textos. Oval [O]: utilizada para desenhar formas ovais ou circulares. Retângulo [R]: com esta ferramenta você pode desenhar retângulos. Ela tem uma op- ção na seção Opções que serve para arre- dondar os cantos do retângulo e várias op- ções no Inspetor de propriedades. Lápis [Y]: esta é uma ferramenta de desenho << à mão livre >> do Flash. Ela oferece algu- mas opções no Inspetor de propriedades e outras na seção Opções O Formato de lápis define o comportamen- to do lápis, tornando os traços mais arre- dondados ou mais angulares. Pincel [B]: com esta ferramenta você pode pintar áreas e criar desenhos, ela fornece opções como pintura normal, pintura de preenchimento, pintar por trás, pintar a se- leção, etc. Transformação livre [Q]: com esta ferra- menta você pode alterar as medidas do ob- jeto, rotacioná-los, etc. Transformação de preenchimento [F]: per- mite alterar o ângulo, a posição ou o tama- nho de um gradiente criado para preencher uma determinada forma. Tinteiro [S]: ferramenta utilizada para alte- rar a cor, a espessura e o tipo de uma linha criada anteriormente. Balde de tinta [K]: esta é a ferramenta de preenchimento do Flash. Na seção Opções, Unidade 1 • Flash CS6, utilização e configuração24/219 você pode definir como será o comporta- mento da ferramenta. Conta-gotas [I]: ferramenta utilizada para capturar a cor de um objeto determinado, deste modo é possível que ela seja utilizada para desenhar ou preencher outros objetos. Borracha [E]: a “famosa” borracha. Com ela é possível apagar desenhos feitos na área de trabalho do Flash. Quando ativa apre- senta três opções: Modo apagar: apaga linhas, preenchimen- to, interno, etc. Modo torneira: apaga a mesma cor onde for clicado. Formato da borracha: permite escolher o formato da borracha. Mão [H]: realiza a movimentação completa da área de trabalho. Zoom [M,Z]: esta é a ferramenta de zoom. Com ela você pode aumentar ou diminuir a visualização da tela. Indicado para pessoas que precisam fazer trabalhos de alta preci- são. Link Caso a sua versão do Flash seja em inglês ou você queira ter uma visão diferente sobre as ferramen- tas mostradas aqui, vale a pena verificar esse link: <https://docarmocosta.wordpress.com/au- las-e-tutoriais/animacoes-em-flash/princi- pais-ferramentas-do-flash/>. Acesso em: 20 out. 2016. https://docarmocosta.wordpress.com/aulas-e-tutoriais/animacoes-em-flash/principais-ferramentas-do-flash/ https://docarmocosta.wordpress.com/aulas-e-tutoriais/animacoes-em-flash/principais-ferramentas-do-flash/ https://docarmocosta.wordpress.com/aulas-e-tutoriais/animacoes-em-flash/principais-ferramentas-do-flash/ Unidade 1 • Flash CS6, utilização e configuração25/219 Inspetor de propriedades Nele são exibidas todas as propriedades dos objetos utilizados no Flash, de acordo com o tipo de objeto selecionado, mudam- -se as propriedades exibidas. Figura 9 | Inspetor de propriedades Fonte: elaborado pelo autor. Unidade 1 • Flash CS6, utilização e configuração26/219 Linha do tempo Figura 10 | Linha do tempo Fonte: elaborado pelo autor. Para saber mais Cada objeto criado através da barra de ferramentas possui propriedades distintas, desenhe utilizando as ferramentas retângulo e círculo e observe as diferenças entre as propriedades através do Inspetor de propriedades. Com o uso constante desse painel, você aprenderá recursos novos do Flash. Unidade 1 • Flash CS6, utilização e configuração27/219 Este painel vai exibir informações sobre a sua animação no Flash CS6, ela irá mostrar o tempo de duração, as camadas, se existe interpolação de movimento, etc., além de propriedades da camada selecionada. Para saber mais As camadas no Flash podem ser visíveis ou não no filme final, basta clicar na bolinha abaixo do íco- ne com um olho ( ) na camada em que deseja ocultar o elemento. A camada também pode ser bloqueada para evitar que seus objetos sejam al- terados enquanto você faz o filme, basta clicar na bolinha abaixo do ícone do cadeado ( ) 2.5 Palco de Edição Efetivamente é nele que começa seu traba- lho. O palco de edição não é nada mais do que a área do seu projeto onde os elemen- tos serão organizados. É possível alterar seu tamanho e cor facilmente para adaptá-lo ao tipo de trabalho que você deseja realizar. Quando falamos de palco, não estamos nos referindo apenas à área do retângulo bran- co que aparece na tela. Esse retângulo deli- mita aquilo que será mostrado na animação final. Você também pode colocar elementos fora do palco, só que esses não vão aparecer quando o arquivo for publicado. Essa carac- terística é muito útil quando se quer escon- der símbolos ou elementos que não devem Unidade 1 • Flash CS6, utilização e configuração28/219 ser vistos pelos usuários. Por padrão, o palco tem fundo branco e tamanho de 550 x 400 pixels, porém, é possível alterar essas características. Veja como: 1. Abra um arquivo novo no Flash, conforme estudamos. 2. Nos campos Dimensões, digite valores diferentes dos atuais para largura e altura do palco. No nosso caso escolhemos 600 x 100 pixels. Na caixa Cor do plano de fundo, clique na seta para abrir a paleta de cores. Nela selecione a cor que preferir. Figura 11 | Alteração das configurações do arquivo Fonte: elaborado pelo autor. Clique em OK para ver o resultado. Unidade 1 • Flash CS6, utilização e configuração29/219 Link Ao desenvolver banners animados para web, exis- tem alguns tamanhos padrões de arquivo que po- dem ser utilizados para tornar a experiência do usuário mais intuitiva. Para você conhecer esses tamanhos acesse: <http://www.abraweb.com. br/banners.php>. Acesso em: 20 out. 2016. http://www.abraweb.com.br/banners.php http://www.abraweb.com.br/banners.php Unidade 1 • Flash CS6, utilização e configuração30/219 Glossário Ambiente de trabalho: janela principal de um aplicativo de computador, onde encontramos todas as ferramentas para sua utilização. Depurar: procurar, encontrar e corrigir, pela examinação do código de um programa, as falhas ou erros de um computador. Pixel: é o menor elemento em um dispositivo de exibição, a ele é possível atribuir uma única cor. Simplificando, ele é o menor ponto que forma uma imagem digital, diversos pixels montam uma imagem inteira. https://pt.wikipedia.org/wiki/Cor https://pt.wikipedia.org/wiki/Imagem_digital Questão reflexão ? para 31/219 É hora de praticar! Faça um novo filme com as proprie- dades que achar interessante. Que tal tentar desenhar alguns objetos para ver como eles se comportam no palco? 32/219 Considerações Finais • Neste módulo, você conheceu como instalar o aplicativo Flash e os requisitos de hardware necessários para essa instalação. Tratamos sobre as caracterís- ticas básicas do ambiente de trabalho e como realizar pequenas customiza- ções. Vale salientar que muitas ferramentas serão vistas no decorrer desse curso, então, é importante estudar o ambiente de trabalho do aplicativo. Unidade 1 • Flash CS6, utilização e configuração33/219 Referências ADOBE. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http:// help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 10 ago. 2016. SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 352 p. http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf 34/219 Assista a suas aulas Aula 1 - Tema: Introdução ao Flash Cs6. Bloco I Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/bbea7a- 4a950049218c45baf3db8f1173>. Aula 1 - Tema: Introdução ao Flash Cs 6. Bloco II Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/de- 57379cd5d9f9a1339790a9a0886c31>. http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/bbea7a4a950049218c45baf3db8f1173 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/bbea7a4a950049218c45baf3db8f1173 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/bbea7a4a950049218c45baf3db8f1173 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/de57379cd5d9f9a1339790a9a0886c31 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/de57379cd5d9f9a1339790a9a0886c31 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/de57379cd5d9f9a1339790a9a0886c31 35/219 1. Assinale a alternativa que se refere à área do ambiente de trabalho do Adobe Flash que utilizamos para a criação do filme que será exibido para o usuário. a) Barra de menus. b) Conectividade com XML. c) Palco. d) Inspetor de propriedades. e) ActionScript 2.0. Questão 1 36/219 2. Assinale a alternativa que identifica a barra onde encontramos as ferra- mentas necessárias para a criação dos objetos em Flash. a) Caixa de ferramentas. b) Barra de propriedades. c) Painel de controle do ActionScript. d) Navegador de símbolos. e) Biblioteca. Questão 2 37/219 3. Assinale a alternativa que identifica qual ferramenta você deve utilizar para desenhar linhas e curvas similares ao mundo real. a) Seta. b) Caneta. c) Pincel. d) Subselecionar. e) Conta-gotas. Questão 3 38/219 4. Ao clicar na bolinha em frente ao nome da camada abaixo do ícone com um olho, o que acontece com essa camada? Assinale a alternativa correta. a) Utiliza o ActionScript 5.0. b) Visualiza os resultados no painel depurar. c) Reinicia as guias do aplicativo. d) Troca a visualização de painéis. e) Oculta a camada na animação. Questão 4 39/219 5. Assinale a alternativa que identifica onde ficam os quadros que repre- sentam o tempo de duração do filme. a) Depurar. b) Barra de propriedades. c) Janela de ações. d) Linha do tempo. e) Biblioteca. Questão 5 40/219 Gabarito 1. Resposta: C. Palco é o nome dado à área onde os ele- mentos criados são mostrados e podem ser visíveis ou não ao usuário, de acordo com as seleções realizadas nas camadas da linha do tempo. 2. Resposta: A. A Caixa de ferramentas, como o próprio nome sugere, armazena as ferramentas para o trabalho na criação de animações no Adobe Flash e traz as propriedades de cada uma em sua parte inferior. 3. Resposta: B. A ferramenta caneta é a mais indicada para o trabalho, pois possui pontos de ancora- gem em cada clique e direciona a linha con- forme é arrastada. 4. Resposta: E. O ícone do olho serve para ocultar a camada na animação, desta forma, os objetos pre- sentes nesta camada não serão exibidos no filme final. 5. Resposta: D. A linha do tempo é responsável por mostrar a duração do filme em flash e é segmentada em quadros. 41/219 Unidade 2 Criando uma animação Objetivos 1. Criar uma animação quadro a quadro. 2. Familiarizar-se com a linha do tempo e algumas ferramentas do aplicativo Flash CS 6. Unidade 2 • Criando uma animação42/219 Introdução Você conheceu um pouco do ambiente de trabalho do Flash CS 6 no módulo 1 e agora irá utilizar suas ferramentas para a criação de animações. Neste módulo, você enten- derá como é possível fazer uma animação quadro a quadro. Esta técnica é utilizada para a criação de desenhos animados e até mesmo animações do tipo Stop Motion. 1. Configurando sua Primeira Animação Para começarmos, siga as seguintes orien- tações: 1. Abra o aplicativo Flash CS 6. 2. Na tela de boas-vindas selecione na coluna central a opção ActionScript 3.0 3. O ambiente de trabalho com suas ca- racterísticas padrão será carregado. Você irá desenhar um círculo que irá se mo- vimentar à direita em cada quadro-chave. Na caixa de ferramentas, vamos selecionar a ferramenta oval. Link Se você tem interesse em compreender e conhe- cer mais sobre as animações Stop Motion, vale a pena dar uma olhada neste link do Tech Tudo que explica exatamente o que são essas animações e como elas podem ser produzidas <http://www. tecmundo.com.br/player-de-video/2247-o- -que-e-stop-motion-.htm>. Acesso em: 20 out. 2016. http://www.tecmundo.com.br/player-de-video/2247-o-que-e-stop-motion-.htm http://www.tecmundo.com.br/player-de-video/2247-o-que-e-stop-motion-.htm http://www.tecmundo.com.br/player-de-video/2247-o-que-e-stop-motion-.htm Unidade 2 • Criando uma animação43/219 Figura 1 | Seleção da ferramenta oval Fonte: elaborado pelo autor. Com a ferramenta oval ativada, basta posicionar o cursor em forma de + no palco do Adobe Flash CS 6, clicar e arrastar para desenhar o círculo. Procure desenhá-lo mais à esquerda do quadro para que seja possível a realização do movimento quadro a quadro. 2. Realizando a Animação 2.1 Entendendo os objetos desenhados no Flash Conforme orientado no item anterior, você realizou o desenho de um círculo conforme mostra a Figura 2. Unidade 2 • Criando uma animação44/219 Figura 2 | Círculo desenhado à esquerda do palco Fonte: elaborado pelo autor. Unidade 2 • Criando uma animação45/219 Este objeto possui propriedades distintas de contorno e preenchimento que podem ser al- teradas com o uso da ferramenta de seleção. Para saber mais Utilizando a ferramenta de seleção clique so- bre o contorno do objeto apenas. O contorno ficará selecionado. Caso arraste o mouse com esta sele- ção, você verá dois objetos diferentes na tela, um que se refere ao contorno e outro ao preenchimen- to. Caso queira excluir qualquer um dos dois obje- tos, basta dar um clique sobre ele e então pressio- nar a tecla DELETE. É importante tomar cuidado ao utilizar a ferramenta de seleção, pois ela pode selecionar apenas partes de um determinado obje- to, o que pode ser útil ao trabalho ou dificultar sua produção. Tente utilizar a ferramenta de seleção de formas diferentes para entender sua atuação. Para alterar a cor do preenchimento do ob- jeto é possível utilizar a ferramenta balde de tinta (K). Basta selecionar a cor no seletor de cores localizado na caixa de ferramentas e depois clicar com o balde de tinta sobre o objeto que se deseja colorir. 2.2 A Linha de Tempo e os Qua- dros-Chave Para realizar a animação quadro a quadro no Flash CS6, vamos utilizar a linha do tem- po. Ela é dividida em quadros e esses são numerados de 5 em 5, conforme você pode ver na Figura 3. Unidade 2 • Criando uma animação46/219 Figura 3 | Linha do tempo e suas divisões Fonte: elaborado pelo autor. Os quadros que utilizamos como impor- tantes para a animação são chamados de quadros-chave. Vamos inserir novos qua- dros-chave para realizar a nossa animação. Para inserir um novo quadro-chave, basta clicar sobre o momento desejado na linha do tempo com o botão direito do mouse e depois em inserir quadro-chave. Figura 4 | Inserindo novos quadros-chave Fonte: elaborado pelo autor. Vamos realizar a inserção de novos quadros- -chaves de 5 em 5 quadros, aproveitando Unidade 2 • Criando uma animação47/219 as marcações da linha do tempo. Repetire- mos esta ação até o quadro 60. A cada novo quadro-chave inserido, iremos movimentar, utilizando a ferramenta seleção, nosso cír- culo para a direita. Esse processo é similar ao processo de rea- lizar animação com bloco de papel, em que em cada folha do bloco (aqui chamamos de quadro-chave) você desenha o objeto um pouco diferente da posição anterior. Bas- ta folhear o bloco depois e ver a animação. Esse bloco é chamado de Flip-book ou kine- ógrafo. Após a realização deste processo,sua ani- mação já pode ser testada. 2.3 Testando a Animação Uma das formas mais comuns para testar a animação é realizar sua visualização no Link Agora que você está conhecendo um pouco mais dos processos de animação que tal ler um documento bem interessante sobre como são produzidos os desenhos animados? Disponível em: <http://www.academia.edu/4880977/ T%C3%A9cnicas_de_Anima%C3%A7%- C3%A3o_A_T%C3%89CNICA_DO_DESE- NHO_ANIMADO>. Acesso em: 20 out. 2016. http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO http://www.academia.edu/4880977/T%C3%A9cnicas_de_Anima%C3%A7%C3%A3o_A_T%C3%89CNICA_DO_DESENHO_ANIMADO Unidade 2 • Criando uma animação48/219 player SWF. Para isso, vamos clicar no menu Controlar, depois em Testar filme e por último em Testar. Nesse momento, o player será exibido e teremos o vídeo em exibição de loop contínuo. Figura 5 | Player de vídeo para teste Fonte: elaborado pelo autor. Unidade 2 • Criando uma animação49/219 No player, o menu mais importante nes- te momento é o menu controlar, que tra- rá as opções para a manipulação do vídeo. Comandos de retroceder, avançar e parar, além do comando repetir, farão o vídeo ser reproduzido de forma contínua. Link Enquanto você aprende a desenvolver suas ani- mações, uma sugestão é estar preparado para en- tender programação, que veremos nos próximos módulos. Disponível em: <https://www.youtu- be.com/watch?v=j221cC53Kt0>. Acesso em: 20 out. 2016. 3. Utilizando Camadas Diferen- tes Agora que você já sabe como criar uma ani- mação, é importante lembrar que a linha do tempo do Flash permite a utilização de camadas diferentes. Desta forma, podemos ter em uma mesma animação objetos com movimentos diferentes, desde que cada um esteja em uma camada. Você irá animar as três formas geométricas básicas da bandeira do Brasil. Para isso, va- mos criar três camadas e chamá-las, res- pectivamente, de retângulo, losango e cír- culo. Em cada uma das camadas, vamos desenhar uma das formas da bandeira, con- forme podemos ver na Figura 6. https://www.youtube.com/watch?v=j221cC53Kt0 https://www.youtube.com/watch?v=j221cC53Kt0 Unidade 2 • Criando uma animação50/219 Figura 6 | Camadas da bandeira do Brasil Unidade 2 • Criando uma animação51/219 Fonte: elaborado pelo autor. Vamos inserir quadros-chave a cada dez quadros, até o 50 e animar cada peça para que a bandeira do Brasil seja montada ao centro do palco. Lembre-se de que a cada Para saber mais Não se esqueça dos botões de controle presentes nas camadas, como o mostrar ou ocultar camada e o bloquear ou desbloquear camada , eles poderão ser úteis no momento em que estamos trabalhando com as formas para que a seleção de um objeto não atrapalhe a seleção do outro. Para ativá-lo em uma camada, basta que clicar na bolinha localizada em frente ao nome da camada, embaixo do item que deseja utilizar (visualização ou bloqueio). novo quadro-chave inserido, você deverá movimentar um pouco a peça para que ela se aproxime do centro do palco. Se testar o filme neste momento (CTRL+AL- T+ENTER) você irá notar que a bandeira é montada e rapidamente é desmontada de- vido à configuração repetir do filme. Para remover este problema, vamos inserir mais um quadro-chave em cada camada no qua- dro 70, desta forma do quadro 50 ao 70 te- remos tempo para ver a bandeira montada por completo. Unidade 2 • Criando uma animação52/219 Para saber mais Uma das formas de tornar as animações mais inte- ressantes é utilizando o ActionScript, que é a lin- guagem de programação por trás das animações desenvolvidas em Flash. O ActionScript é uma lin- guagem orientada a objetos e segue padrões uti- lizados em C e JavaScript. O painel ações é quem oferece recursos para as programações com o ActionScript e ele pode ser encontrado através do menu Janela >> Ações, ou simplesmente pressio- nando a tecla F9. Unidade 2 • Criando uma animação53/219 Glossário Camadas: são como folhas de papel transparente sobrepostas em que podemos realizar dese- nhos/gráficos diferentes e com diferentes comportamentos. Quadro: momento da animação em que a imagem deve ser modificada para criar a ilusão de animação (em inglês chamado de frame). SWF: formato de saída do Adobe Flash que pode ser exibido pelos players de vídeo mais co- muns e inserido em páginas da web. Questão reflexão ? para 54/219 É hora de praticar! Faça um uma animação com cenário e um objeto em movimento. O cenário deve estar em uma camada e o objeto a ser movimentado deverá ser dese- nhado em outra. Observe uma sugestão na Figura 7. Questão reflexão ? para 55/219 Figura 7 | Barco e cenário sugestão de prática Fonte: elaborado pelo autor. Nossa animação ainda parece primária, mas fique tranquilo, você irá entender como isso pode ser melhorado na próxima aula! Não deixe de praticar. 56/219 Considerações Finais • É importante entender bem as configurações inicias das animações, pois elas servirão de base para nossas animações. • Neste módulo, você foi capaz de criar animações utilizando o con- ceito de camadas. Este conceito é amplamente utilizado não apenas em Flash, mas em diversos aplicativos utilizados para criação e trata- mento de imagens. Unidade 2 • Criando uma animação57/219 Referências ADOBE. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http:// help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 20 out. 2016. SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 352 p. http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf 58/219 Assista a suas aulas Aula 2 - Tema: Criando animações quadro a quadro. Bloco I Disponível em: <//fast.player.liquidplatform.com/pA- piv2/embed/dbd3957c747affd3be431606233e0f- 1d/08997e4da724bc4a762a5c47cbe89a3f>. Aula 2 - Tema: Criando animações quadro a quadro. Bloco II Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/732fa- b96590eff8fc10f1446b471be55>. http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/08997e4da724bc4a762a5c47cbe89a3f http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/08997e4da724bc4a762a5c47cbe89a3f http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/08997e4da724bc4a762a5c47cbe89a3f http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/732fab96590eff8fc10f1446b471be55 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/732fab96590eff8fc10f1446b471be55 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/732fab96590eff8fc10f1446b471be55 59/219 1. Assinale a alternativa que indica o nome dado ao quadro em que será feita a modificação do comportamento de um objeto criado no Flash: a) Animator Plus. b) Quadro-mestre. c) Quadro-chave. d) Quadro de modificação. e) Linha do tempo. Questão 1 60/219 2. Assinale a alternativa que contempla os botões que podem ser utilizados na linha do tempo para facilitar o trabalho em outras camadas. Questão 2 a) Mostrar ou Ocultar / Bloquear e desbloquear. b) Remover Dados / Limpar cenário. c) ActionScript / XML de ação. d) Biblioteca / Cenário. e) Quadro-mestre / Quadro-chave. 61/219 3. Ao desenhar um objeto no Flash, ele tem comportamento de dois objetos diferentes, isto acontece devido às propriedades de: Questão 3 a) Posição no Cenário / Subseleção. b) Contorno / Preenchimento. c) Linha curva / Quadro-chave. d) Ferramenta de seleção / Preenchimento. e) Contorno / Conta-gotas. 62/219 4. Quandoé necessário testar o filme, qual a combinação de teclas que pode- mos utilizar no teclado? Questão 4 a) ALT + V. b) CTRL + C e CTRL + V. c) SHIFT + BARRA DE ESPAÇO. d) ALT + F. e) CTRL + ALT + ENTER. 63/219 5. Assinale a opção que contempla qual recurso devemos utilizar quando queremos que um filme fique um tempo repetindo o mesmo quadro, sem iniciar a repetição. Questão 5 a) Inserir um novo quadro no início do filme. b) Repetir o filme no sentido inverso. c) Não encerrar o filme com quadro-chave. d) Inserir mais um quadro-chave em um momento à frente igual ao último e) Essa ação não é possível no Flash CS 6. 64/219 Gabarito 1. Resposta: C. Quadro-chave é o quadro utilizado pelo Flash para delimitar onde as modificações do objeto acontecem. 2. Resposta: A. Todas as camadas trazem os botões mostrar ou ocultar, representados por um olho, que deixam ou não a camada visível no filme, e também o botão bloquear ou desbloquear, representado por um cadeado que impede a movimentação dos objetos daquela cama- da enquanto selecionamos objetos em ou- tras camadas. 3. Resposta: B. O contorno e o preenchimento no Flash são tratados como objetos diferentes, desse modo vale a pena ficar atento quando for necessário usar um ou outro. 4. Resposta: E. A combinação CTRL + ALT + ENTER tem o mesmo efeito que utilizar o menu Controlar >> Testar Filme >> Testar. 5. Resposta: D. A repetição de quadros iguais faz com que o filme pareça mostrar sempre a mesma ima- gem antes de iniciar a sua repetição. 65/219 Unidade 3 Exibição de filme Objetivo 1. Verificar como o comportamento de uma animação pode mudar quando alteramos as propriedades do vídeo. Unidade 3 • Exibição de filme66/219 Introdução Nos dois primeiros módulos você conheceu um pouco do ambiente de trabalho do Flash CS 6 e utilizou suas ferramentas para a cria- ção de sua primeira animação. Tudo parece muito complicado ainda, mas com a prática vamos começar a criar animações mais in- teressantes. Neste módulo, você irá alterar as propriedades do filme e entender a rela- ção de quadros por segundo, tempo de fil- me e as diferentes formas de interpretação da visão humana. Link A ideia de quadros por segundo (frames per se- cond) é utilizada em computação não apenas como recurso para a criação de animações web, mas também para a construção de jogos. O arti- go do TecMundo expande esta visão para games e hardware de computador. Vale a pena conhecer. Disponível em: <http://www.tecmundo.com. br/video/10926-o-que-sao-frames-por-se- gundo-.htm>. Acesso em: 20 out. 2016. 1. Animando Objetos Desenha- dos 1.1 Desenhando Objetos com Várias Ferramentas No material do módulo 3, você encontrará http://www.tecmundo.com.br/video/10926-o-que-sao-frames-por-segundo-.htm http://www.tecmundo.com.br/video/10926-o-que-sao-frames-por-segundo-.htm http://www.tecmundo.com.br/video/10926-o-que-sao-frames-por-segundo-.htm Unidade 3 • Exibição de filme67/219 um item de como realizar a animação básica de um objeto e utilizará o mesmo princípio agora para entender algumas característi- cas do vídeo. Utilizando as ferramentas de desenho e a lata de tinta produzimos o carrinho que pode ser observado na Figura 1. Figura 1 | Carrinho desenhado com ferramentas do Flash CS 6 Fonte: elaborado pelo autor. Para saber mais Além de criar seus próprios objetos no Flash, é possível trabalhar com elementos multimídia que são: • Som (voz humana, música, efeitos especiais). • Fotografia (imagem estática). • Vídeo (imagens em pleno movimento). • Animação (desenho animado). • Gráficos. • Textos (incluindo números, tabelas etc.). O termo multimídia se refere à combinação de diferentes recursos para criar, armazenar, ma- nipular e pesquisar conteúdos. Em animações, quanto maior a aplicação dos recursos multimí- dia, melhor será o resultado final. Unidade 3 • Exibição de filme68/219 1.2 Convertendo os Desenhos em Símbolos Ao utilizar diversas ferramentas para cria- ção de desenhos, é importante transformar esses desenhos em símbolos para facilitar o processo de animação. 1. Com a ferramenta de seleção (V) faça um retângulo ao redor do carrinho, de modo a selecionar todo o objeto. Figura 2 | Carrinho completamente selecionado Fonte: elaborado pelo autor. Clique sobre o menu Modificar e em seguida em Converter em símbolo (para esta opera- ção é possível utilizar a tecla de atalho F8). Observe a Figura 3. Figura 3 | Menu Modificar para converter o objeto em símbolo Fonte: elaborado pelo autor. A janela de conversão será aberta e exibirá os tipos de símbolos possíveis, vamos sele- cionar a opção gráfico e nomear o “Símbolo 1” como “carrinho”. Unidade 3 • Exibição de filme69/219 Figura 4 | Converter em símbolo Fonte: elaborado pelo autor. Para saber mais • Gráfico: para imagens estáticas e criar partes reutilizáveis de animação vinculadas à linha do tempo principal. Os símbolos gráficos trabalham junto com a linha do tempo principal. Os símbolos gráficos deixam menor o arquivo do Flash, pois não possuem linha do tempo independente. Unidade 3 • Exibição de filme70/219 Para saber mais • Botão: para criar botões interativos que respondam a cliques do mouse, rolagens ou outras ações. Crie as imagens associadas aos diversos estados do botão e, em seguida, atribua ações a cada esta- do do botão. São utilizados em web para efeitos. • Clipe de filme: os clipes de filme têm a sua própria linha do tempo com vários quadros, independen- temente da linha do tempo principal: imagine-os como aninhados dentro de uma linha do tempo principal que pode conter controles e sons interativos e até outras ocorrências de clipe de filme. Após estes passos, o Flash CS6 entenderá o desenho do carrinho como um único símbolo e fare- mos a animação dele. 2. Animando o Gráfico e Alterando o FPS 2.1 Animação quadro a quadro Criaremos quadro-chaves a cada cinco quadros e em cada um movimentaremos o objeto à di- reita até o quadro 70. Pondera-se que neste módulo você deverá se preocupar com o FPS da ani- Unidade 3 • Exibição de filme71/219 mação, assim, praticar animações quadro a quadro (visto no módulo 2) é fundamental. Observe a linha do tempo na Figura 5 após a criação dos quadros e o quadro 1(a) e quadro 70(b) em que aparecem, respectivamente, as posições iniciais e finais do objeto. Figura 5 | Linha do tempo e posição inicial e final do objeto Fonte: elaborado pelo autor. 2.2 Alterando o FPS da Animação Após realizar a animação mostrada no item anterior e testar seu comportamento padrão (CTRL+ Unidade 3 • Exibição de filme72/219 ENTER), agora, você irá alterar a taxa de quadros exibidas por segundo em sua ani- mação. Quanto menor a quantidade de qua- dros exibidos por segundo, mais perceptível serão os movimentos do objeto e mais difícil será a ideia de movimento. Em contraparti- da, quanto maior a quantidade de quadros exibidos por segundo, menos perceptível os movimentos do objeto e melhor a ideia de movimento. Para realizar a alteração, clique no palco e vamos utilizar o painel de propriedades lo- calizado na lateral direita da tela. Figura 6 | Painel de Propriedades com destaque da propriedade FPS Fonte: elaborado pelo autor. Unidade 3 • Exibição de filme73/219 Neste momento, é importante realizar os testes para notar a diferença no comporta- mento de sua animação. Altere o FPS para cinco quadros por segun- do e execute o teste (CTRL + ENTER), neste modo é possível ver nitidamente cada qua- dro e como o movimento é realizado com lentidão, o que não traz nada de interessan- te à animação desenvolvida. Altere o FPS para 70 quadros por segundo e execute o teste (CTRL + ENTER), deste modo teremos a execução do filme completa em um segundo e a animação aparenta uma maior fluidez. Para saber mais Agora que você entende o FPS, é possível calcu- lar o tempo de duração do seu filme com base na quantidade de quadros que você criou na linha do tempo e na quantidadede FPS de seu filme. Utilizando um filme padrão com taxa de 24 FPS e trabalhando na linha do tempo até o quadro 70, teremos um filme de aproximadamente 2,9 segundos, basta dividir a quantidade de quadros criados pela taxa de FPS. Neste caso: 70 / 24 = 2,916666. Unidade 3 • Exibição de filme74/219 3. Recursos para Auxiliar a Pro- dução de Quadros-Chave 3.1 Papel de Transparência No módulo anterior e neste você trabalhou com as animações quadro a quadro, e sem- pre era necessário mover o objeto “um pou- co mais” que no momento anterior. Como ter base de quanto esse movimento está diferente do momento anterior? Essa per- gunta é fácil de responder com base na uti- lização de um recurso da linha do tempo do Flash CS6, que é o papel de transparência. Com ele ativado é possível analisar o com- portamento do objeto um pouco antes do quadro atual. 1. Localize na barra de ferramentas abai- xo da linha do tempo o botão Papel de transparência e clique sobre ele. Figura 7 | Papel de transparência Fonte: elaborado pelo autor. 2. Observe que se abre na linha do tem- po no quadro selecionado (no exem- Unidade 3 • Exibição de filme75/219 plo quadro 25) uma área cinza mais escura. Figura 8 | Área do papel de transparência Fonte: elaborado pelo autor. 3. Você pode redimensionar a área de transparência clicando sobre as alças (bolinhas) nas extremidades da área cinza mais escura. 4. Observe que no seu filme verá uma sombra que corresponde ao quadro anterior da sua animação conforme mostra a Figura 9. Figura 9 | Aplicação do papel de transparência na animação Fonte: elaborado pelo autor. Deste modo, torna-se mais fácil o processo de movimentação do objeto com base em sua posição anterior. Unidade 3 • Exibição de filme76/219 Link Talvez você não seja um especialista em desenho em computador, mas tenha curiosidade de co- nhecer algumas técnicas para isso. O blog Guaxi- nim Animador traz um tutorial básico para a cria- ção de um personagem em Flash. Disponível em: <http://raccoonanimation2.blogspot.com. br/2014/08/como-desenhar-no-adobe- -flash-tutorial.html>. Acesso em: 20 out. 2016. http://raccoonanimation2.blogspot.com.br/2014/08/como-desenhar-no-adobe-flash-tutorial.html http://raccoonanimation2.blogspot.com.br/2014/08/como-desenhar-no-adobe-flash-tutorial.html http://raccoonanimation2.blogspot.com.br/2014/08/como-desenhar-no-adobe-flash-tutorial.html Unidade 3 • Exibição de filme77/219 Glossário FPS: frames per second ou quadros por segundo, é uma taxa da animação que se refere à quan- tidade de quadros que serão exibidos dentro de um segundo. Papel de transparência: utilizado para mostrar a sobreposição da imagem do quadro anterior, facilitando o desenvolvimento das animações. Símbolo: elemento gráfico que compõe o filme do Flash e pode ser utilizado para facilitar o de- senvolvimento de animações. Permite o reuso nas animações. Questão reflexão ? para 78/219 Qual seria o tempo ideal de uma animação em Flash? Quais são os itens necessários para uma animação? Va- mos assistir a uma animação feita em Flash sobre o fun- cionamento do computador somente para despertar sua curiosidade. Disponível em: <https://www.youtube. com/watch?v=7ax4h6Szxt0>. Acesso em: 20 out. 2016. https://www.youtube.com/watch?v=7ax4h6Szxt0 https://www.youtube.com/watch?v=7ax4h6Szxt0 79/219 Considerações Finais • As animações quadro a quadro são utilizadas por grandes estúdios para a criação dos desenhos 3D que conhecemos atualmente. • Toda animação torna-se mais interessante quando nos valemos de recursos multimídia para melhorá-las. Os elementos multimídia inseridos na ani- mação farão com que nosso usuário esteja muito atento a ela. Link Para entender melhor quais são os elementos mul- timídia que podem ser aplicados no ambiente de animações, acesse o link sugerido. Disponível em: <http://vivendoavidaacademica.blogspot.com. br/2011/03/elementos-de-multimidia-e-hi- permidia.html>. Acesso em: 20 out. 2016. http://vivendoavidaacademica.blogspot.com.br/2011/03/elementos-de-multimidia-e-hipermidia.html http://vivendoavidaacademica.blogspot.com.br/2011/03/elementos-de-multimidia-e-hipermidia.html http://vivendoavidaacademica.blogspot.com.br/2011/03/elementos-de-multimidia-e-hipermidia.html Unidade 3 • Exibição de filme80/219 Referências ADOBE. Trabalho com símbolos no Animate CC. Disponível em: <https://helpx.adobe.com/br/ animate/using/symbols.html>. s. d. Acesso em: 15 set. 2016. ______. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http://help. adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 10 set. 2016. SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 352 p. 81/219 Assista a suas aulas Aula 3 - Tema: Alterando FPS e criando símbo- los. Bloco I Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/1bca- 68fbf83482d1a71f4748d6577c18>. Aula 3 - Tema: Alterando FPS e criando símbo- los. Bloco II Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/cc- 947c5a56b439b9da1fe59ba3154c76>. http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1bca68fbf83482d1a71f4748d6577c18 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1bca68fbf83482d1a71f4748d6577c18 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/1bca68fbf83482d1a71f4748d6577c18 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/cc947c5a56b439b9da1fe59ba3154c76 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/cc947c5a56b439b9da1fe59ba3154c76 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/cc947c5a56b439b9da1fe59ba3154c76 82/219 1. Assinale a alternativa correta. É possível calcular o tamanho de um filme em Flash dividindo a sua quantidade de quadros na linha do tempo por: a) Número de quadros-chave. b) Tempo de desenvolvimento. c) Taxa de FPS. d) Número de símbolos. e) Quantidade de camadas. Questão 1 83/219 2. Assinale a alternativa que contempla o que devemos utilizar para alterar a taxa de FPS de um filme em Flash. a) Painel de propriedades. b) Caixa de ferramentas. c) Menu modificar e a opção Testar filme. d) ActionScript. e) Quadro-chave. Questão 2 84/219 3. Assinale a alternativa que completa corretamente a lacuna. Quando criamos um objeto com base na composição de outros objetos é interessante trans- formá-lo em um: _______________. a) Objeto do ActionScript. b) Símbolo. c) Grupo. d) Navegador de filme. e) Personagem. Questão 3 85/219 4. Assinale a alternativa que completa corretamente a lacuna. Ao alterar o FPS para um valor _____________, é possível verificar o filme com muita percepção das mudanças quadro a quadro, o que não é interessante para animação. a) Múltiplo de três. b) Acima de 200. c) Maior. d) Igual à quantidade de quadros. e) Menor. Questão 4 86/219 5. O professor de Flash pediu para que seus alunos montassem um filme de dez segundos utilizando a taxa de 12 FPS. Assinale a opção que contemple quantos quadros são necessários para produzir um filme de dez segundos. a) 50 quadros. b) 200 quadros. c) 96 quadros. d) 120 quadros. e) 190 quadros. Questão 5 87/219 Gabarito 1. Resposta: C. Ao dividir a quantidade de quadros no filme pela taxa de FPS, vamos obter em segundos a duração aproximada do filme criado. 2. Resposta: A. As alterações de FPS devem ser realizadas pelo painel de propriedades no cenário do filme que estamos desenvolvendo. Existe a opção FPS e basta digitar o novo valor. 3. Resposta: B. O símbolo permite a reutilização dos dese- nhos em Flash e seu uso do tipo adequado (gráfico, botão ou clipe de filme) fará a di- ferença no tamanho do arquivo gerado e também na maneira de animar o símbolo. 4. Resposta:E. Sempre com valores menores que 24 FPS (taxa padrão), é possível notar os quadros e então perceber melhor as falhas de movi- mento. 5. Resposta: D. Para calcular o comprimento de um filme, basta dividir a quantidade de quadros na li- nha do tempo pelo FPS e teremos esse re- sultado. Desse modo, não sabemos quantos quadros temos no filme (x), mas temos FPS e a duração, logo: 10s = x / 12. Então, temos x = 12 * 10 o que resulta em x = 120. Logo, precisamos de 120 quadros. 88/219 Unidade 4 Animações com interpolação Objetivo 1. Mostrar como criar animações sim- ples de forma rápida em comparação à técnica quadro a quadro. Unidade 4 • Animações com interpolação89/219 Introdução Até este momento você já compreende todo o funcionamento das animações qua- dro a quadro e as propriedades que podem ser alteradas para que seu vídeo tenha mo- vimentos melhores ou não. Agora, convém uma pergunta: toda animação só pode ge- rar movimento com a mudança sutil de uma imagem quadro a quadro? A resposta é não! Existem recursos mais simples para realizar esse tipo de animação e este é o conteúdo deste módulo. Vamos falar um pouco sobre um conceito chamado de Interpolação no Flash CS6. 1. Animações com Interpolação 1.1 Bolinha “ping-pong” Vamos desenhar uma bolinha que cairá e voltará ao ponto inicial como se “pingas- se” no chão. Iniciaremos um novo filme Ac- tionScript 3.0. Como foi feito nos módulos Link O site da Khanacademy traz um executor de inter- polação linear para fazer uma bolinha cair apenas definindo no eixo y a posição inicial e final durante os 24 quadros exibidos. Disponível em: <https:// pt.khanacademy.org/partner-content/pixar- -latam/animation-latam/intro-to-animation- -latam/p/animao-com-interpolao-linear>. Acesso em: 10 nov. 2016. https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear https://pt.khanacademy.org/partner-content/pixar-latam/animation-latam/intro-to-animation-latam/p/animao-com-interpolao-linear Unidade 4 • Animações com interpolação90/219 anteriores, utilizando a ferramenta oval (O), vamos desenhar a bolinha no alto do cená- rio, conforme exibe a Figura 1. Figura 1 | Bolinha no alto do cenário Fonte: elaborado pelo autor. Para deixar nossa animação com uma apa- rência mais interessante, você pode inserir uma nova camada e desenhar um cenário para a “bolinha que pinga”. Lembre-se de sempre alterar os nomes das camadas para facilitar sua identificação posterior. Obser- ve o resultado final do cenário na Figura 2. Figura 2 | Cenário para a animação interpolada Fonte: elaborado pelo autor. Unidade 4 • Animações com interpolação91/219 1.2 Preparando a Animação para a Criação da Interpolação Para fazer a interpolação, você deverá pri- meiramente estender a camada cenário até o quadro 90, conforme mostra a Figura 3. Link Caso queira colocar imagens no fundo de sua ani- mação, é importante entender que estas imagens podem precisar de tratamento prévio, uma das formas de modificar as imagens é utilizando os canais que são as matrizes de cores usadas para formar cada pixel. Exemplo: os canais de forma- ção das cores no sistema RGB são Red (Verme- lho), Green (Verde) e Blue (Azul). Para entender melhor o trabalho com bitmaps, vale a pena con- ferir este link da Adobe. Disponível em: <http:// help.adobe.com/pt_BR/as3/dev/WS5b3cc- c516d4fbf351e63e3d118a9b90204-7d66. html>. Acesso em: 5 dez. 2016. http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d66.html Unidade 4 • Animações com interpolação92/219 Figura 3 | Camada cenário com quadro-chave no quadro 90 Fonte: elaborado pelo autor. Unidade 4 • Animações com interpolação93/219 Agora, você fará a interpolação em dois mo- mentos distintos na camada bolinha: • No quadro 45, você deve criar um quadro-chave e colocar a bolinha to- cando o solo. • No quadro 90, você deve criar um qua- dro-chave com a bolinha na posição inicial. O resultado deste processo pode ser visto na Figura 4. Unidade 4 • Animações com interpolação94/219 Figura 4 | Bolinha tocando o solo (com erro de camada) Fonte: elaborado pelo autor. Unidade 4 • Animações com interpolação95/219 Neste momento você percebeu que a bo- linha ficou atrás do solo que desenhamos e essa não era a intenção, ela deveria ficar sobre o solo. Para resolver este tipo de pro- blema, que pode acontecer ao longo do de- senvolvimento de suas animações, basta al- terar a ordem das camadas na linha do tem- po. Clique sobre a camada bolinha e arraste para cima até aparecer antes da camada ce- nário na linha do tempo. Observe a Figura 5. Figura 5 | Mover camada bolinha para cima, sobre a camada cenário Fonte: elaborado pelo autor. Deste modo conseguimos resolver o proble- ma da bolinha oculta atrás do solo como o detalhe destacado na Figura 6. Figura 6 | Bolinha posicionada corretamente Fonte: elaborado pelo autor. Unidade 4 • Animações com interpolação96/219 Link Em nossas aulas utilizamos sempre desenhos como objetos, mas todos os movimentos e ações podem ser realizados com texto também. É sem- pre importante ficar atento ao uso da ferramenta texto. Vale a pena olhar as instruções da Adobe sobre a ferramenta texto. Para mais informações, sugere-se um link. Disponível em: <https://hel- px.adobe.com/br/animate/using/classic- -text.html>. Acesso em: 5 dez. 2016. 1.3 Fazendo a interpolação clás- sica Após ter realizado todo o procedimento de preparo descrito no item anterior, você irá realizar a criação da interpolação. Basta cli- car na linha do tempo com o botão direito do mouse, entre os quadros 1 e 45 (qualquer posição), e selecionar Criar interpolação clássica. Repita o processo entre os quadros 46 e 90 para criar outra interpolação clássi- ca, o resultado final visível na linha do tem- po pode ser visto na Figura 7. https://helpx.adobe.com/br/animate/using/classic-text.html https://helpx.adobe.com/br/animate/using/classic-text.html https://helpx.adobe.com/br/animate/using/classic-text.html Unidade 4 • Animações com interpolação97/219 Figura 7 | Linha do tempo com aplicação das interpolações clássicas Fonte: elaborado pelo autor. O Flash CS6 exibirá setas entre os quadros que possuem interpolação e o resultado pode ser ob- servado na execução do filme (CTRL + ENTER). Para saber mais • Interpolação clássica: com ela é possível realizar a criação de movimento entre as formas, mas não é possível realizar mudança de cor nem em sua forma geométrica. • Interpolação de formas: com ela é possível criar efeitos de morfismo que podem ser feitos usando transformações de instâncias, como rotação, redimensionamento ou distorção, além de aplicar con- tornos, gradientes e preenchimentos, ou seja, com ela alteramos a forma física de um objeto. Permi- te, por exemplo, fazer um retângulo se transformar em um círculo. Unidade 4 • Animações com interpolação98/219 Salve seu arquivo FLA e vamos criar um novo documento para entender a interpo- lação de forma. 1.4 Fazendo a Interpolação de Forma Crie um novo arquivo no Flash do tipo Ac- tionScript 3.0. (Menu Arquivo >> Novo) 1. Desenhe um retângulo no quadro 1 e insira um quadro-chave no quadro 90 e desenhe um círculo. Observe na Fi- gura 8 que foram utilizadas cores di- ferentes. Figura 8 | Figuras para a interpolação de forma Fonte: elaborado pelo autor. 2. Na linha do tempo, basta clicar com o botão direito do mouse entreos qua- dros 1 e 90 e clicar em Criar interpola- ção de forma, observe Figura 9. Unidade 4 • Animações com interpolação99/219 Figura 9 | Criando a interpolação de forma Fonte: elaborado pelo autor. Unidade 4 • Animações com interpolação100/219 3. Após realizado este procedimento, será possível verificar o surgimento de uma seta () na linha do tempo e na tela teremos uma forma intermediária entre o retângulo e o círculo desenha- do. Observe a Figura 10. Figura 10 | Forma intermediária entre o retângulo e o círculo Fonte: elaborado pelo autor. Neste momento, ao executar o filme, vere- mos o retângulo se tornar um círculo grada- tivamente e as cores vão mudar gradativa- mente de uma figura para a outra também. Para saber mais As interpolações de forma não precisam ser rea- lizadas apenas de um quadro-chave para outro, elas podem combinar diversos quadros-chave durante o seu desenvolvimento e, desta forma, teremos formas sendo modificadas diversas ve- zes durante a execução de um filme. Caso queira utilizar um texto como forma para a interpola- ção, basta desmembrá-lo duas vezes utilizando a combinação de teclas CTRL+B (duas vezes). Unidade 4 • Animações com interpolação101/219 2 Utilizando Camadas Guias 2.1 Entendendo a camada guia Em algumas animações é preciso fazer com que o objeto percorra um caminho deter- minado. Isto é possível em Flash através da utilização de camada guia. Você irá realizar uma animação simples, utilizando a cama- da guia. Inicie um novo arquivo em Flash do tipo ActionScript 3.0. 1. Vamos desenhar um círculo e fazer com que ele percorra um caminho predefinido. 2. Após desenhar o círculo, renomeie a camada para animação. 3. Você irá converter o objeto desenhado em Símbolo (F8). Figura 11 | Convertendo o objeto em símbolo Fonte: elaborado pelo autor. 4. Crie um novo quadro-chave no mo- mento 80 da linha do tempo. 5. Clique com o botão direito do mouse sobre a camada animação e selecione Unidade 4 • Animações com interpolação102/219 a opção adicionar guia de movimento clássico, conforme mostra a Figura 12. Figura 12 | Adicionar guia de movimento clássico Fonte: elaborado pelo autor. 6. Observe o comportamento da linha do tempo. 7. Na camada Animação, clique com o botão direito entre os quadros 1 e 80 e clique em Criar interpolação clássica. 8. Na camada Guia, usando o lápis dese- nhe um caminho qualquer. Conforme a Figura 13. Figura 13 | Desenho do caminho com a ferramenta lápis Fonte: elaborado pelo autor. Unidade 4 • Animações com interpolação103/219 9. No quadro 1, posicione o gráfico so- bre o início da linha e no quadro 80 posicione o gráfico sobre o término da linha. 10. Execute o filme e verifique o com- portamento da interpolação (CTRL + ENTER). Para saber mais É possível criar o caminho utilizando qualquer ferramenta de desenho e não necessariamente o lápis, tente criar novos projetos com a interpola- ção clássica e desenhar caminhos diferentes. Se possível, utilize camadas guias em mais de uma camada para criar novos objetos no mesmo filme, cada um com um comportamento diferente. Unidade 4 • Animações com interpolação104/219 Glossário FLA: extensão utilizada pelo Flash para os arquivos que contêm as camadas e os símbolos e po- dem ser alterados, diferente do arquivo SWF que é apenas para a publicação. Interpolação: é a conexão entre quadros-chave, fazendo com que haja uma ação entre eles. Questão reflexão ? para 105/219 Vamos praticar! Monte uma interpolação de forma com três etapas, convertendo um retângulo em círculo e o círculo novamente em retângulo. Não se esqueça de utilizar cores diferentes em cada objeto para enfatizar as alterações. 106/219 Considerações Finais • As interpolações são muito utilizadas em animações, pois elas evitam o desenvolvimento quadro a quadro que demora muito tempo para ser re- alizado. • Vale lembrar que elas apenas devem ser utilizadas quando tivermos for- mas simples e textos. Para objetos complexos, como imagens importadas de outros aplicativos, a melhor maneira de animá-las ainda é com a ani- mação quadro a quadro. • O uso de textos é sempre importante nas animações, mas sempre deve- mos nos atentar ao desmembramento do mesmo para a realização corre- ta. Utilizando o atalho CTRL+B duas vezes, conseguimos converter o texto em forma. Unidade 4 • Animações com interpolação107/219 Referências ADOBE. Trabalho com símbolos no Animate CC. s. d. Disponível em: <https://helpx.adobe.com/ br/animate/using/symbols.html>. Acesso em: 10 nov. 2016. ______. Utilização do Adobe Flash Professional CS5 e CS 5.5. 2011. Disponível em: <http:// help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf>. Acesso em: 10 nov. 2016. SIMÃO, Daniel Hayashida. Flash CS6: introdução ao mundo da animação. São Paulo: Viena, 2014. 352 p. https://helpx.adobe.com/br/animate/using/symbols.html https://helpx.adobe.com/br/animate/using/symbols.html http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf http://help.adobe.com/pt_BR/flash/cs/using/flash_cs5_help.pdf 108/219 Assista a suas aulas Aula 4 - Tema: Uso de interpolação. Bloco I Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/c0b- 6f6b8edb56fb47e3a2620463a45eb>. Aula 4 - Tema: Uso de interpolação. Bloco II Disponível em: <//fast.player.liquidplatform.com/pApiv2/ embed/dbd3957c747affd3be431606233e0f1d/968817d- 1f227bdfe83982231213acc04>. http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/c0b6f6b8edb56fb47e3a2620463a45eb http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/c0b6f6b8edb56fb47e3a2620463a45eb http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/c0b6f6b8edb56fb47e3a2620463a45eb http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/968817d1f227bdfe83982231213acc04 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/968817d1f227bdfe83982231213acc04 http://fast.player.liquidplatform.com/pApiv2/embed/dbd3957c747affd3be431606233e0f1d/968817d1f227bdfe83982231213acc04 109/219 1. Assinale a opção que indica como é chamada a característica que permi- te que existam movimentos entre as formas em um filme sem ser quadro a quadro. a) Linha do tempo. b) Animação linear. c) Interpolação. d) Transição de cenas. e) Cenário direto. Questão 1 110/219 2. Assinale a alternativa que representa o que devemos utilizar quando pre- cisamos realizar uma alteração de forma entre dois objetos em um filme. a) Interpolação de forma. b) Interpolação clássica. c) Menu modificar e a opção Testar filme. d) Interpolação de movimento. e) Camada guia. Questão 2 111/219 3. Assinale a opção que indica o nome da camada utilizada para a criação de um “caminho” de objeto na interpolação clássica. a) Camada mágica. b) Guia. c) Grupo. d) Orientador de interpolação. e) Acelerômetro. Questão 3 112/219 4. Assinale a alternativa que indica a solução quando os objetos de cama- das diferentes ficam em ordens diferentes da que esperávamos. a) Redesenhar todo filme. b) Criar uma nova cena. c) Alterar as propriedades da interpolação. d) Deixar a quantidade de quadros pares. e) Reordenar as camadas. Questão 4 113/219 5. Assinale a opção que compreenda quais os três tipos de símbolos que podem ser criados em Flash ao pressionar a tecla F8. a) Livro, Filme e Arquivo. b) Quadro, Linha do tempo e Interpolação. c) Forma, Clássico e Movimento. d) Gráfico, Botão e Clipe de filme. e) Quadro-chave, Mestre, Testar Filme. Questão 5 114/219 Gabarito 1. Resposta: C. Interpolação permite criar uma ação entre quadros-chave, por exemplo, movimento ou forma. 2. Resposta: A. A interpolação de forma é capaz de conver- ter um objeto em outro gradativamente e até mesmo modificar sua cor, caso cada ob- jeto inicial tenha sido criado com cores di- ferentes. 3. Resposta: B. Guiaé uma camada invisível no filme final que serve apenas como orientação para o movimento de um símbolo. 4. Resposta: E. As camadas podem ser reordenadas apenas clicando e arrastando seu nome na linha do tempo e funcionam como folhas de papel, basta escolher a que ficará mais acima ou mais abaixo. 5. Resposta: D. Os tipos são Gráfico, Botão e Clipe e cada um deles pode ser utilizado de uma forma diferente na animação. O Gráfico é o mais leve e o indicado para interpolações sim- ples, o Botão possui comportamentos dife- rentes de acordo com cada interação reali- zada, o Clipe de filme possui uma linha do tempo independente que pode ser utilizada para aninhar efeitos entre a linha de tempo dele e a principal. 115/219 Unidade 5 ActionScript Objetivo 1. Introduzir a linguagem de programa- ção ActionScript. Unidade 5 • ActionScript116/219 Introdução Neste quinto módulo de animações e fer- ramentas virtuais, você irá aprender como utilizar o ActionScript – pode ser abreviado como AS no decorrer deste material –, a lin- guagem de programação que opera junto com o aplicativo Flash da Adobe. Com essa linguagem é possível criar filmes interativos, desse modo permite que o usuário interaja com objetos na tela. O usuário poderá clicar, arrastar, entre outras opções com qualquer objeto. É importante que você esteja ciente de que uma linguagem de programação ne- cessita de lógica e estruturação de coman- dos para funcionar adequadamente. Você está na metade do nosso curso, não se esqueça de que todos os exercícios propos- tos devem ser praticados constantemente. É importante que você conheça bem como as animações são feitas e a partir de agora entenda que cada objeto pode ser progra- mado e isso trará muitas novidades para o usuário do seu website. 1. Conhecendo o Ambiente de Programação ActionScript 1.1 Utilizando nossa animação da “bolinha ping-pong” Você se lembra da nossa animação da bo- linha ping-pong? Nós vamos utilizá-la para a introdução sobre ActionScript. Nesse mo- mento, você conhecerá o ambiente de pro- gramação dentro do Flash. É importante dedicar muita atenção, pois este ambiente Unidade 5 • ActionScript117/219 será seu companheiro por mais alguns mó- dulos da nossa jornada e também durante o desenvolvimento de seus futuros trabalhos. Link Existem diferenças entre a linguagem ActionS- cript 1.0 e 2.0 para a ActionScript 3.0. Nas duas pri- meiras versões ela era estruturada como C, agora, na versão 3.0 trabalha com classes como em Java. Entender algumas dessas mudanças demanda pesquisa. O blog iwannabeadesigner traz links interessantes e até um PDF de referência para as modificações. Disponível em: <https://iwanna- beadesigner.wordpress.com/2008/04/15/ migrar-do-as2-para-o-as3-parte-i/>. Acesso em: 10 nov. 2016. Dentro do Flash, o ambiente de programação está embutido em um dos painéis do apli- cativo. Este painel é conhecido como Ações e para acessá-lo você pode utilizar o menu Janela >> Ações, conforme mostra a Figura 1, ou mesmo pressionar a tecla F9. Em um primeiro momento o painel é flutu- ante no ambiente de trabalho do aplicati- vo, porém, posteriormente à sua abertura é possível fixá-lo em um local de fácil acesso. https://iwannabeadesigner.wordpress.com/2008/04/15/migrar-do-as2-para-o-as3-parte-i/ https://iwannabeadesigner.wordpress.com/2008/04/15/migrar-do-as2-para-o-as3-parte-i/ https://iwannabeadesigner.wordpress.com/2008/04/15/migrar-do-as2-para-o-as3-parte-i/ Unidade 5 • ActionScript118/219 Figura 1 | Menu para abrir o painel de Ações Fonte: elaborado pelo autor. 1.2 O painel Ações Após abrir o painel Ações, conforme descri- to no item anterior, é importante conhecer seu funcionamento básico. Observe na Fi- gura 2 este painel. Unidade 5 • ActionScript119/219 Figura 2 | Painel de Ações Fonte: elaborado pelo autor. Vamos realizar um teste bem simples que deve parar a reprodução cíclica do nosso filme. Obser- ve pela Figura 2 que estou na camada da bolinha no quadro 90 e neste momento vou digitar o comando: Unidade 5 • ActionScript120/219 Stop(); Feito isso, execute o filme e verifique o que acontece. Após a execução do movimento de queda e retorno, o filme deve parar sua reprodução. Essa é uma das ações mais simples que podem ser executadas na linha do tempo com o auxílio do ActionScript. Note que após o Stop, colocamos um parênteses aberto e fechado “()”, isso indica que o comando é na verdade uma função. Se digitarmos Stop sem os parênteses, nada será realizado. Como citado na introdução, os comandos da linguagem AS são todos em inglês, caso tente usar em português, por exemplo, “ parar(); ” o compilador exibirá uma mensagem de erro que pode ser observada em Erros do Compilador ao lado da linha do tempo conforme mostra a Figura 3. Figura 3 | Erros do compilador na função inexistente parar(); Fonte: elaborado pelo autor. Unidade 5 • ActionScript121/219 2 Programando Objetos com Ac- tionScript 2.0 2.1 Utilizando o arrastar e soltar Em algumas animações podemos fazer com que o usuário arraste um objeto pela tela. Esse processo é bem simples usando o AS 2.0. Para saber mais Atente-se para as diferenças entre ActionScript 1.0, 2.0 e 3.0: • ActionScript 1.0 e 2.0: permite codificar dire- tamente o objeto, sem dificuldades. • ActionScript 3.0: é fundamental conhecer a estrutura de classes para que a programação de funções seja possível. Você irá realizar uma animação simples para mover um retângulo pela tela. Inicie um novo arquivo em Flash do tipo ActionS- cript 2.0. 1. Desenhe um retângulo com o auxílio da ferramenta retângulo. 2. Clique sobre ele com a ferramenta de seleção e abra o painel de ações. Neste momento você deverá ver uma men- sagem mostrando que a seleção atual não pode ter ações aplicadas, conforme mostra a Figura 4. Unidade 5 • ActionScript122/219 Figura 4 | Painel Ações com mensagem de erro Fonte: elaborado pelo autor. Unidade 5 • ActionScript123/219 3. Para evitar o problema apresentado na Figura 4, precisamos converter o nosso retângulo em símbolo. Pressio- ne a tecla F8. Dê um nome para o sím- bolo. 4. Novamente com o símbolo seleciona- do, clique no painel ações. 5. Vamos digitar o código de arrastar e soltar, conforme o bloco de progra- mação ActionScript 2.0 exibido na se- quência: on (press) { startDrag(“”); } on (release) { stopDrag(); } Com a utilização destes simples comandos, é possível mover o símbolo criado pela tela ao clicar com o mouse. Vamos detalhar es- ses comandos para facilitar o entendimen- to. Observe o primeiro bloco: on (press) { startDrag(“”); } A função on (Evento) aguarda um evento do mouse proveniente do usuário. Ela pode ter os seguintes parâmetros como princi- pais: Unidade 5 • ActionScript124/219 Quadro 1 | Parâmetros da função on. Press Pressionar Release Soltar ReleaseOutside Soltar fora KeyPress Pressionamento de tecla Rollover Rolar sobre Rollout Rolar para fora dragOver Arrastar sobre dragOut Arrastar para fora Fonte: elaborado pelo autor. Desse modo, qualquer ação que quisermos analisar do usuário basta escolher o melhor parâmetro. O comando startDrag(“”);é o responsável por mover o objeto ativo pela tela quando o usuário executa a função descrita no co- mando. Neste caso, utilizamos o comando on (press) para verificar o movimento por ar- rasto assim que o usuário pressionar o bo- tão do mouse sobre o objeto. A segunda parte do código acompanha a mesma ideia, vamos observar: on (release) { stopDrag(); } A função on (release) verifica se o botão do mouse foi solto, caso esta ação seja ver- dadeira ela interrompe o arrasto do objeto através da execução do comando stop- Drag();. Unidade 5 • ActionScript125/219 Para saber mais Alguns comandos em ActionScript 3.0 são bem diferentes dos comandos em ActionScript 2.0. É sempre importante ficar atento às mudanças para não se confundir na hora de programar. Antes do AS 3.0, existiam
Compartilhar