Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Transcrição

1 Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Apresentar os recursos básicos do Flash MX 2004, conhecendo sua interface, suas ferramentas e seus recursos básicos. Tópicos 1. I ntrodução e interface 2. Documentos 3. Linha do Tempo 4. Objetos e símbolos no Flash 1. Introdução e Interface Nesta aula buscaremos apresentar os principais recursos do software Macromedia Flash MX 2004, ferramenta usada para a criação de animações e interfaces interativas. É fundamental, para um melhor aprofundamento, a pesquisa em livros sugeridos na Bibliografia. O Flash Desde 1997 o Flash (que partiu de um programa chamado FutureSplash adquirido pela Macromedia de uma empresa chamada Future Wave) vem evoluindo de um simples programa de animações compactas para um forte software de desenvolvimento multimídia. Sua fácil comunicação com scripts e programas de servidor, o carregamento de imagens JPEG, MP3, WAV ajuda a torná lo o aplicativo central para gerar conteúdo interativo, de baixa largura de banda e atual para distribuição pela Web. Em sua versão atual (7.0) o Flash oferece mais ferramentas para criar e um aperfeiçoamento de sua linguagem de programação ActionScript 2.0. Existem dois produtos: Macromedia Flash MX 2004 e Macromedia Flash MX Professional Novos Recursos o Efeitos de Linha de tempo o Comportamentos

2 o Verificador Ortográfico o Guias de Documento o Painel Actions aprimorado o Find and Replace o Melhor Suporte gráfico para arquivos importados o Assistente de importação de vídeo o Detecção do Flash Player o ActionScript 2.0 o Editor de script o Ambiente de desenvolvimento visual em tela o Componentes Avançados o Vinculação de dados o Gerenciamento de projeto o FLV Exporter o Renderização de tamanho de fonte pequeno o Reprodução de arquivo FLV a partir de servidores Web padrão o Suporte para serviços Web o Melhor desempenho em tempo de execução o Atualizações automáticas do player O Flash é uma aplicação híbrida, trabalha com mapa de bits para web e desenho vetorial. Produz multímidia interativo e animações sofisticadas. O ActionScript é uma linguagem de programação orientada a objetos muito semelhante ao JavaScript. Pode trabalhar em conjunto com XML (extensible Markup Language). HTML e muitas outras aplicações e partes da web. Os diversos componentes do Flash: Processador de Mapa de Bits As imagens de mapa de bits são compostas de pontos de uma grade de pixels individuais. A localização (e a cor) de cada ponto deve ser armazenada na memória. Outra desvantagem é que elas não podem ser escalonadas sem comprometer a qualidade. Mas, para imagens de qualidade fotográfica este formato é indispensável e produzem melhor qualidade de imagem e tamanho de arquivo do que imagens vetoriais equivalentes. Programa de desenho baseada em vetores Desenha formas definido pontos que são descritos por coordenadas. Como esse esquema é matemático o conteúdo vetorial é mais compacto e redimensionável sem perda de qualidade da imagem facilitando muito as conexões na Internet. O Flash renderiza as animações vetoriais com muito mais facilidade. Compactador de vídeo Os Flash Player 6 e 7 incluem um mecanismo integrado de vídeo o codec Sorenson Spark É possível importar arquivo de vídeo de origem diretamente nos documentos

3 do Flash MX 200 (arquivos.fla). Os usuários não precisam ter Apple QuickTime, RealSystems RealOne, ou Microsoft Windows Media Player instalados. Player de áudio É possível carregar arquivos MP3 durante o tempo de execução. Outros formatos pode ser anexados durante a autoria podem ser anexados a quadros chave ou botões para segundo plano ou efeitos e também podem ser distribuídos pela linha de tempo. Programa de autoria multimídia Os arquivos Flash podem conter diversos recursos, som, imagens estáticas, animação e vídeo além da possibilidade de adicionar comandos que permitem a interatividade (AS). Sequenciador de animação A Janela Timeline permite organizar o conteúdo com uso de camadas e pastas que facilitam o trabalho na produção da animação com muitos elementos separados. A sequencia de quadros que cria a ilusão de movimento pode ser controlada em sua velocidade, duração e ordem de apresentação. Temos ainda a possibilidade do uso de cenas. Tipos de Arquivos do Flash M X 2004 Documentos Flash (arquivo.fla) File > Save > ou File > Save As Fornece o ambiente de autoria para projetos de todos os tamanhos. Dentro deste ambiente o conteúdo pode ser organizado em cenas. É possível manipular as camadas simples, com guias ou máscaras, trabalhar com a Timeline, quadros, símbolos, bibliotecas, etc. Filmes Flash (arquivos.swf) File > Export > Export Movie É uma versão otimizada do documento Flash, retendo apenas os elementos do arquivo de projeto que são realmente utilizados. São carregados no servidos Web, em que normalmente são integrados em documentos HTML para outros usuários Web visualizarem. Observações:

4 Os filmes Flash 6 e 7 podem ser otimizados com a opção Compress Movie disponível na caixa de diálogo Publish Settings File > Publish Setting principalmente para filmagens que utilizam uma boa quantidade de ActionScript. O recurso Publish oferece vários formatos de exportação como o formato de vídeo digital QuickTime Flash ou o formato Animated GIF bem como uma série de mapa de bits (JPG) individuais ou arquivos vetoriais. Adobe Illustrator.ai Animated GIF, GIF Sequence, and GIF Image.gif Bitmap (BMP).bmp DXF Sequence and AutoCAD DXF Image.dxf Enhanced Metafile (Windows).emf EPS 3.0 with Preview.eps Flash document (SWF).swf Macromedia Flash Video.flv JPEG Sequence and JPEG Image.jpg PICT (Macintosh).pct PNG Sequence and PNG Image.png QuickTime.mov QuickTime Video (Macintosh).mov Wav audio (Windows).wav Windows AVI (Windows).avi Windows Metafile.wmf

5 M enu Contém todos os comandos do programa Barra Gerenciamento Controles principais de arquivo, como: salvar, abrir novo, imprimir, etc. Barra de ferramentas Contém todas as ferramentas disponíveis para criação e alteração de conteúdo. Á rea de Trabalho Local onde é construída animação P ainéis São blocos de comandos e ferramentas separadas por categorias específicas. Timeline ( linha do tempo) Painel que permite criar e alterar a seqüência da animação. M enu O menu contém todos os comandos do programa sendo subdividido por funcionalidade. File Abrir (Open) Salvar (Save) importar (Import) ou seja, manipular o arquivo. Edit

6 Comandos relativos à edição do documento copiar (Copy) cortar (Cut) colar (Paste), localizar (Find) selecionar (Select All) entre outras edições. View Comandos relacionados à visualização do documento réguas (rulers), zoom, grades (grid). I nsert Possibilita a inserção de elementos no documento como layers, frames, cenas. M odify Modificações nos elementos páginas, cor de fundo, tamanho, imagens, formatos. Text Possui comandos relativos a alteração dos textos como tipo de fonte (Font), estilo (Style), cor (Color). Commands Comandos avançados. Control Recursos relacionados ao controle do filme: playback, inibir botões, etc. W indow Contém os comandos relativos à janela. Contém acesso a todos os painéis do programa. Help Acesso aos arquivos e tutoriais de ajuda, além de informações sobre o software. Barra de Gerenciamento Contém todos os comandos para gerenciamento do arquivo entre outros. Open New Abrir um novo documento em branco. Open Abrir um arquivo existente através da janela de inclusão. Save Salva o arquivo de trabalho formato:.fla P rint Possibilita a inserção impressão do arquivo.

7 Cut Corta os dados selecionados. Copy Copia os dados selecionados para a memória de transferência. P aste Cola os dados que estão na memória de transferência. Undo e Redo Volta para posição anterior a última ação e refaz a última ação. Snap Permite o encaixe exato de objetos entre si ou com as guias da janela. Barra de Ferramentas (tools) W indow s > Tools Ferramentas da esquerda para a direita de cima para baixo: 1. SELECTI ON seta 2. SUBSELECT sub seleção 3. LI NE linha 4. LA SSO laço 5. P EN caneta 6. TEXT texto 7. OVA L oval 8. RECTA NGLE / P OLY STA R retângulo e polígono 9. P ENCI L lápis 10. BRUSH pincel 11. FREE TRANSFORM transformação livre 12. TRANSFORM FI LL transformar preenchimento 13. I NK BOTTLE tinteiro 14. P A I NT BUCKET balde de tinta 15. EY EDROP P ER conta gotas 16. ERASER borracha 17. HA ND mão 18. ZOOM ampliação / redução 19. STROKE COLOR cor de traço 20. FI LL COLOR cor de preenchimento 21. BLA CK A ND W HI TE preto e branco 22. NO COLOR sem cor 23. SW A P COLOR troca de cor 24. OP TI ONS A REA área de opções O uso dessas ferramentas será explicado em exercícios práticos no decorrer das próximas aulas. P ainéis

8 Os painéis do Flash servem para a exibir, organizar e alterar elementos em um documento. Nesses painéis encontramos opções que controlam os símbolos, instâncias, cores, tipo, quadros e outros elementos. Podemos criar um grupo de painéis e salvá lo para uso futuro Para exibir a lista completa de painéis disponíveis no Flash, veja o menu WINDOW. A maioria dos painéis contém um menu no canto superior direito com mais opções e uma seta que permite seu recolhimento/abertura. Para salvar um conjunto personalizado de painéis: 1 Escolha W I NDOW > SA VE P A NEL LA Y OUT 2 Insira um nome para o layout e clique em OK. Para selecionar um layout de painel: 1 Escolha W I NDOW > P A NEL SETS 2 Escolha DEFA ULT LA Y OUT para redefinir os painéis para o layout padrão ou escolha um layout personalizado salvo anteriormente. Exemplo de como desenhar no Flash Segue um exemplo de como podemos usar as ferramentas no FLASH, vamos desenhar um circulo e mudar sua cor de preenchimento e borda. 1 Escolha a ferramenta OVAL

9 2 Segurando o botão esquerdo do mouse desenhe um circulo na área de trabalho 3 Quando soltar o botão do mouse você terá um círculo com as cores atualmente mostradas no setor COLORS da barra de ferramentas.

10 4 escolha a opção P A I NT BUCKET TOOL (baldinho) na barra de ferramentas. 5 Escolha a nova cor para o preenchimento no setor COLORS da barra e feramentas.

11 6 Pinte o círculo com a nova cor. 7 Podemos mudar também a cor da borda com a ferramenta I NK BOTTLE

12 8 Também podemos usar o I NSP ETOR DE P ROP RI EDA DES para mudar as cores do círculo, bem como, a forma de sua borda e espessura.

13 2. Documentos A janela de documento é a área principal de trabalho do Flash. Informa qual documento FLA está atualmente ativo, e o local que atual dentro do projeto. O Flash pode trabalhar com várias janelas de documento simultaneamente permitindo de forma facilitada a troca de objetos entre elas. A área do STA GE (área branca) estabelece o tamanho do filme publicado (SWF). Pode ser alterado; A área cinza em volta do STA GE é reservada para os objetos que estão fora da área visível. Isto será melhor entendido quando discutirmos animação. 1 Barra de título do documento: 2 Rótulo de localização : Mostra a cena atual e pare do projeto em edição. 3 M enu Edit Scene: Permite um salto a outras cenas para sua edição. 4 M enu Edit Symbol: Leva diretamente ao símbolo escolhido permitindo sua edição. 5 Controle Stage View : Caixa de valor de escala no canto superior direito da janela de documento. Mostra a escala atual da área stage e permite digitar novas porcentagens.

14 Para formatar as propriedades do documento usamos a janela Document P roperties = Ctrl + J = M odify > Document. P ropriedades do Documento: Ctrl + J Dimensions Permite mudar o tamanho de apresentação do filme. M atch Permite adaptar este tamanho P rinter papel da impressora Contents : ao conteúdo existente na área de trabalho Default: Tamanho padrão 550 x 400 px. Background color Permite alterar a cor de fundo do filme. Frame rate Altera a velocidade de leitura do filme em fps (frames por segundo) Ruler units Alterar a unidade de medida das réguas. M ake Default Volta ao padrão. 3. Linha do Tempo A linha de tempo é a principal ferramenta para a criação de animações no FLASH. Precisamos entender sua composição fazendo uma comparação com outros recursos de animação. Os LA Y ERS são camadas que permitem a sobreposição de imagens como as transparências em métodos tradicionais de animação.

15 Considerando que uma animação, na verdade, se constitui em uma seqüência de imagens que exibidas em uma determinada velocidade produz a sensação de movimento os FRAMES são quadros onde construímos essa seqüência de imagens que constituirão o filme e onde podemos determinar a velocidade de leitura e o tempo entre as imagens. Podemos ainda inserir controles com a inserção de comandos Actionscript. A posição, o tamanho e a forma da linha de tempo podem ser ajustados para facilitar o trabalho. Vamos conhecer seus principais recursos. 1 camada (layer) 2 sinal de camada ativa 3 exibe/oculta a camada 4 bloqueia a camada 5 contorna a camada 6 cabeçote de reprodução 7 quadro (frame) 8 opções de visualização de quadro 9 adiciona camada 10 adiciona camada de guia de movimento 11 adiciona pasta de camada 12 exclui camada 13 centraliza quadro onion skin contornos de onion skin editar vários frames marcadores de modificação. 14 quadro atual 15 taxa atual de velocidade 16 tempo passado Linha do Tempo Alguns recursos

16 1 camada ( layer) As camadas são como transparências que sobrepostas permitem um sensação de profundidade no filme 2D. Podemos inserir nonas camadas pelo MENU I nsert > timeline > layer, ou ainda clicando com o botão direito sobre uma camada. 2 sinal de camada ativa O ícone alteração. (lápis) indica qual a camada que está atualmente selecionada para 3 exibe/ oculta a camada O ícone do trabalho. (olho) permite ocultar o conteúdo da camada para facilitar a visualização 4 bloqueia a camada Em alguns momentos precisamos bloquear algumas camadas para proteger seu conteúdo enquanto alteramos uma outra. O ícone (cadeado) permite este bloqueio. 5 contorna a camada Ativa ou desativa um contorno colorido em todos os objetos da camada para facilitar a visualização de todos os objetos e a relação de uns com os outros. 6 cabeçote de reprodução Indica o quadro atual. Arrastando o podemos no mover pelos quadros da animação. 7 quadro (frame) Menor espaço de informação dentro da timeline (abrangeremos este item mais profundamente em outra aula) 8 opções de visualização de quadro Este ícone que fica no canto superior direito do painel TIMELINE permite mudar a forma de exibição dos quadros variando seu tamanho e permitindo até trabalhar com a visualização do conteúdo. Outros itens terão seu uso, melhor explicado, em exercícios práticos. Quadros Representações O Flash tem formas diferentes de representar a Linha de Tempo a cada uso que fazemos dela.

17 As interpolações de movimento (motion tween) são indicadas por um ponto preto no quadro chave inicial; os quadros interpolados intermediários apresentam uma seta preta com um fundo lilás. As interpolações de forma (shape) são indicadas por um ponto preto no quadro chave inicial; os quadros intermediários apresentam uma seta preta com um fundo verde claro. Uma linha tracejada indica que a interpolação está com problemas, como a falta de um quadro chave ou a presença de outros objetos na camada (layer). Um quadro chave único é indicado por um ponto preto. Os quadros cinzas representam que conteúdo permanece sem alteração dentro deste tempo, o último quadro é representado por um retângulo. Uma bandeira vermelha indica que o quadro contém um rótulo (label) ou um comentário. Animação Quadro a Quadro Existem vários processos de animação possíveis no flash, uma delas, é a animação quadro a quadro quando efetuamos alterações diretas em cada quadro da seqüência. No exemplo a seguir vamos criar uma animação onde um círculo muda de car a cada quadro. 1 Clique com o botão direito do mouse sobre o quadro seguinte ao atual na timeline e escolha a opção I nsert Keyrame

18 2 Teremos então dois quadros com a mesma imagem. Vamos mudar a cor do segundo círculo usando o baldinho. 3 Vamos repetir os primeiros procedimentos para inserir um terceiro quadro e mudar a cor do círculo:

19 4 Então teremos no terceiro quadro: 5 Vamos testar a animação precisamos do PAINEL CONTROLLER

20 6 Para testar o filme vamos escolher a opção no menu Control > loop playback 7 P A I NEL CONTROLLER Permite controlar o filme

21 A P ERTE O BOTÃ O P LA Y! Você poderá ver a animação acontecendo na área de trabalho. 4. Objetos e símbolos no Flash I ntrodução Usando as ferramentas básicas de desenho no flash criamos dados brutos ou formas simples. Copiando e distribuindo estas formas dentro dos quadros chaves podemos produzir uma animação, contudo cada vez que quisermos alterar cores e formas destes objetos teremos que ir até cada quadro chave e proceder a alteração. Esta repetição da forma torna o trabalho mais demorado e a reprodução do filme também. Podemos tornar estes objetos mais gerenciáveis transformando os em símbolos e organizandoos na biblioteca ( ctrl + l) temos três tipos de símbolos disponíveis: Símbolos gráficos ( Graphic) botões ( button) e clipes de filme (M ovie Clip). Para transformar um desenho em símbolo proceda da seguinte forma: Selecione o desenho Use a tecla F8 ou no menu: modify > convert to symbol Teremos a Janela Convert to Symbol escolhemos o comportamento (behavior) do símbolo. Graphic São utilizados principalmente para imagens estáticas. Button São símbolos prontos para acionarem alguma ação permitindo assim recursos interativos. M ovie Clip São símbolos especiais que tem uma timeline própria e carregam dentro de si animações e sons independentes do filme principal.

22 Uma vez transformado em símbolo o desenho será guardado na biblioteca (library) onde poderá ser alterado a qualquer momento. Para abrir o painel da library CTRL + L ou no menu w indow > library Utilização: Animação Automática Vamos inserir um quadro chave no frame 10 da timeline podemos usar o botão direito do mouse ou a tecla F6.

23 Uma vez criado o novo quadro chave podemos proceder a alteração da animação neste quadro (confirme o quadro atual observando o cabeçote de leitura), no exemplo, mudaremos a posição do círculo para o canto inferior direito da área de trabalho. Para criar uma animação automática podemos clicar com o botão direto do mouse em qualquer quadro (frame) entre o primeiro e o último quadro e no menu escolher a primeira opção Create M otion Tw een.

24 Podemos testar a animação usando o painel Controller Alguns termos utilizados nesta apostila:

25 Na animação interpolada (Motion Tween) definimos o primeiro A nimação I nterpolada e o último quadro da animação e o FLASH cria automaticamente os quadros intermediários, mudando o tamanho, a rotação, a cor ou outros atributos do objeto igualmente entre os quadros. A nimação Quadro a Quadro A animação quadro a quadro acontece quando temos um quadro chave para cada alteração no filme. São necessárias para animações mais complexas do que um simples movimento no palco. Torna o arquivo maior. Um símbolo é um elemento gráfico, botão ou clipe de filme Símbolo que criamos e que pode ser reutilizado ao longo do filme ou em outros filmes. Podemos também utilizar material importado de outros softwares. Símbolos gráficos são imagens estáticas reutilizáveis durante o processo de animação. Botões são símbolos que responde a cliques do mouse, sobreposições ou outras ações permitindo a interatividade. Símbolos de clipe de filme são animações que podem ser re utilizadas. Possuem sua própria Linha de Tempo, que é reproduzida independentemente da Linha de Tempo do filme principal. Uma instância é uma cópia de um símbolo localizado no Palco I nstância ou aninhado dentro de outro símbolo. Uma instância pode ser alterada e ficar diferente do símbolo original. Quadro Chave Um quadro chave é um quadro onde é definida uma alteração em uma animação ou inclui ações de quadro para modificar um filme ou determinar pontos de parada, fundamentais para que a animação alcance o objetivo esperado. 5. Bibliografia DAMASCENO, Anielle; Flash M X 2004; Visual Books; SP;2004. REINHARDT, Robert; DOWD, Snow; M acromedia Flash M X 2004 A Biblia; Elsevier; SP; Stallons, Jeanette; M acromedia Flash M X professional 2004 ; Macromedia; California; 2004.