1 ESINE

MONOGRAFIA FLASH (I) INDICE 1. INTRODUÇÃO A. A utilização do Flash 2. INSTALAÇÃO A. Requisitos do Sistema 3. INTERFACE A. A Barra de Menus B. Barra de Ferramentas(Toolbarl) C. Utilização do painel propriedades (Properties) D. Linha de Tempo (Timeline) E. Utilização de Camadas (Layers) F. O Palco e a área de trabalho 4. APLICAÇÕES DO FLASH

www.campusesine.net

2 ESINE

1. INTRODUÇÃO O software Adobe® Flash® CS4 Professional é um ambiente de desenvolvimento que permite a criação de conteúdos interactivos e animações especialmente orientados para o ambiente Web. Adicionalmente, pode-se estender o seu uso ao campo da concepção de produtos hipermédia que requeiram gráficos, animações, sons sincronizados e interacção. Hoje em dia, o Adobe Flash CS4 Professional é o software de eleição para a criação de ambientes Web que requeiram uma elevada interacção gráfica com o utilizador, estando especialmente indicado não apenas para designers gráficos, mas igualmente para programadores Web/Web designers. Com o Flash, para além de se criarem animações, gráficos, banners e ilustrações, consegue-se dotar a página Web de conteúdo atractivo capaz de reter os visitantes. São muitos os motivos que fazem com que o Flash seja um ambiente de trabalho que goza de muita popularidade: – Desde logo, permite criar com facilidade ilustrações e animações vectoriais simples e partilhá- las sem dificuldades através da Web. – Permite a criação de conteúdos dinâmicos e de elevado nível de programação. – É completamente compatível com linguagens como PHP, ASP, CGI, etc. – É uma tecnologia altamente utilizada e, portanto, existe abundante material de apoio e de aperfeiçoamento, para além de fóruns específicos, bibliografia, etc. De facto, cerca de 72% dos vídeos online no mundo inteiro são vistos utilizando a tecnologia Flash, o que a tornou a primeira ferramenta de desenvolvimento de animações Web. Além disso, cerca de 99% dos computadores permitem visualizar conteúdos compatíveis com o Adobe Flash Player, pelo que o seu uso já é universal. Para se poder visualizar o resultado dos trabalhos realizados em Flash é necessário ter o reprodutor de Flash «Adobe Flash Player» instalado no browser. Trata-se de um pequeno programa que, depois de instalado, realiza as tarefas de intérprete. As últimas versões dos browsers já o têm incluído, mas, se precisar dele, pode descarregá-lo gratuitamente na página da Adobe (http://www.adobe.com/pt/).

3 ESINE

Com o Flash é possível desenhar com relativa facilidade, podendo-se dar vida aos desenhos com intuitivas ferramentas de animação. Assim, por exemplo, o Flash permite manipular formas vectoriais mediante potentes ferramentas de desenho de formas, tornando possível dobrar, apagar, distorcer, desviar e combinar formas vectoriais de um modo fácil, natural e intuitivo.

A.UTILIZAÇÃO DO FLASH

O Flash é uma ferramenta com múltiplas funcionalidades:

1. ANIMAÇÃO: é, sem dúvida, a principal utilização desta ferramenta. Permite-nos criar a nimações simples, desde um ficheiro .gif até complexos desenhos animados, passando pela criação de banners, apresentações para empresas CDs interactivos, animações para dispositivos móveis, jogos, etc.

2. WEB: desde as últimas versões de flash, esta ferramenta, tornou-se uma presença

quase obrigatória nos web sites com significativo nível de interactividade. Actualmente, criam-se web sites integralmente com flash ou então combinado com outras tecnologias PHP, ASQ, SQL...

3. CONVERSÃO E PUBLICAÇÃO DE DOCUMENTOS: este é um aspecto muito

importante, tendo em conta que se deve tornar compatível qualquer ficheiro, quer seja de imagem, de som, de vídeo ou 3D, com todo o tipo de utilizadores. O Flash proporciona uma boa variedade de formatos de exportação, incluindo o formato QuickTime, abrindo-se assim à compatibilidade com outros produtos e reprodutores Web. Com o Flash pode-se melhorar a capacidade de distribuição e a compatibilidade com todos os utilizadores de ilustrações e gráficos vectoriais, mapas de bits, vídeo, 3D, sons...

B. COMO FUNCIONA O FLASH O conceito de como funciona o Flash é equiparável ao de um filme cinematográfico. Um filme é composto por cenas que se sucedem num palco. Nesse palco, entrarão actores que, ao longo de uma série de fotogramas (linha de tempo) executarão uma acção. A sucessão desses fotogramas é o que nos dará a sensação de animação. O conteúdo de Flash é criado e distribuído com os dois principais ficheiros gerados: Ficheiro FLA (extensão .fla – documento flash) é o ficheiro de edição do conteúdo do nosso filme Flash. Contém todos os dados originais do projecto: imagens, ilustrações, texto, programação e inclusive elementos que não serão publicados mas que decidimos manter em memória para o caso de os querermos utilizar poteriormente. É a nossa área de trabalho, o lugar onde trabalhamos na aplicação Estes ficheiros só podem ser visualizados com o Flash. Ficheiro SWF (extensão .swf – Shockwave Flash – filme flash) é o ficheiro de publicação que, posteriormente será incluído como objecto nos nossos Web Sites. Gere-se, automaticamente, cada vez que testamos o filme que estamos a realizar (ficheiro .fla) sendo, constantemente, actualizado em cada nova modificação introduzida O que se gera é um ficheiro compactado, que ocupa muito menos espaço do que um ficheiro .fla.

4 ESINE

2. INSTALAÇÃO

A. REQUISITOS DO SISTEMA Para se poder executar o Adobe Flash CS4 é necessário dispor da seguinte configuração: Windows – Processador a 1 GHz ou mais rápido. – Microsoft® Windows® XP com Service Pack 2 (recomenda-se o Service Pack 3) ou Windows Vista® Home Premium, Business, Ultimate ou Enterprise com Service Pack 1 (certificado para edições de Windows XP e Windows Vista de 32 bits). – 1 Gb de RAM. – 3,5 Gb de espaço disponível no disco rígido para a instalação; é necessário espaço livre adicional durante a instalação (não se pode instalar em dispositivos de armazenamento Flash). – Resolução de 1024 x 768 (recomendam-se 1280 x 800) com placa gráfica de 16 bits. – Unidade de DVD-ROM. Mac OS – Processador PowerPC® G5 ou Intel® multinúcleo. – Mac OS X v10.4.11-10.5.4. – 1 Gb de RAM. – 4 Gb de espaço disponível no disco rígido para a instalação; é necessário espaço livre adicional durante a instalação (não se pode instalar em dispositivos de armazenamento Flash). – Resolução de 1024 x 768 (recomendam-se 1280 x 800) com placa gráfica de 16 bits. – Unidade de DVD-ROM. Para visualizar os filmes criados (extensão .swf), os utilizadores, em princípio, não terão de instalar qualquer programa, pois praticamente todos os browsers, nas suas últimas versões, incorporam o plug-in necessário para ver filmes Flash. Se dispusermos do software, ao introduzirmos o CD do fabricante no nosso computador, arrancará o executável de instalação. A partir daí, só teremos de seguir os passos que nos são indicados. A partir de http://www.adobe.com/pt/ pode-se descarregar uma versão de avaliação do Flash CS4 (para 30 dias) oferecida pela Adobe para experimentar o programa.

5 ESINE

Acesso aos produtos da Adobe. Clica-se sobre a opção Produtos, depois sobre Flash Professional, e acede-se à secção específica do produto Adobe Flash CS4 Professional.

Adobe Flash CS4 Professional. Nesta secção pode-se comprar a versão, proceder à actualização a partir de uma anterior ou então obter a versão de teste. A seguir, aparece a janela de Início de Sessão. Se ainda não tiver um número de utilizador da Adobe, deve seleccionar a opção «Criar uma conta Adobe».

6 ESINE

Início de sessão na página Web da Adobe. A seguir, aparece um formulário em que devem ser obrigatoriamente preenchidos todos os campos assinalados com um asterisco.

Formulário de registo para o download de versões de teste da Adobe. Na página seguinte, e última deste processo de download, deve-se escolher em que língua e para que plataforma se deseja descarregar a versão de teste.

7 ESINE

Selecção da língua e da plataforma da versão de teste do Adobe Flash CS4. O download da versão para o Windows é composto por dois ficheiros. Uma vez concluído o download, localizam-se os ficheiros descarregados e faz-se duplo clique sobre o ficheiro .exe, para proceder à descompactação do programa.

Ícone do programa que descomprime o Adobe Flash CS4. O passo seguinte é localizar o ficheiro de instalação; ao clicar nele, abre-se a janela de boas-vindas do processo de instalação do programa.

Ícone do programa que instala o Adobe Flash CS4. Faz-se clique em Próximo para iniciar a instalação e seguem-se os passos que vão sendo indicados.

Janela de instalação do Adobe Flash CS4.

8 ESINE

Faz-se clique em Próximo para iniciar a instalação e seguem-se os passos que vão sendo indicados até ela estar concluída. Ao abrir a aplicação, vê-se uma janela de boas-vindas que pode ser desactivada seleccionando a opção Don’t show again (no canto inferior esquerdo). Esta janela está dividida em quatro partes: a) Abrir um elemento recente (Open a Recent Item). b) Criar um novo (Create New). c) Criar com modelo (Create from Template). d) Ampliar (Extend), opção de acrescentar novas ferramentas e componentes que podem ser descarregados da Adobe.

Janela de boas-vindas do Adobe Flash CS4. 3. INTERFACE Pela sua complexidade e versatilidade, seria árduo e excessivamente extenso explicar, neste ponto, todos os aspectos da interface que o Adobe Flash CS4 nos proporciona. Iremos centrar-nos naqueles aspectos que consideramos mais habituais que esta ferramenta nos oferece. De qualquer modo, no menu Help (Ajuda), dispomos de tutoriais que nos serão úteis, tendo em conta que são uma ferramenta de consulta contínua, mesmo até para utilizadores com experiência em flash.

Janela inicial do Adobe Flash CS4

9 ESINE

A. A BARRA DE MENUS

A Barra de Menus tem como objectivo facilitar o acesso às diferentes funcionalidades do programa. É semelhante à de qualquer outro programa de desenho Web ou gráfico, embora apresente algumas particularidades. São apresentados de seguida os principais menus: File: permite criar novos ficheiros, abri- los, guardá-los, etc. Destaca-se a importância das funcionalidades Import, que insere no filme actual quase todos os tipos de formatos de ficheiros (sons, vídeo, imagens e, inclusive, outros filmes de flash), e Publish Settings a partir da qual se podem modificar as características da publicação. Também, permite configurar a impressão das páginas, imprimi- las, etc. Edit: permite cortar, copiar, e colar objectos, desenhos e fotogramas. Também permite personalizar algumas das opções mais comuns do programa. View: para além dos tipos zooms, permite a deslocação através dos fotogramas e das cenas. Também possibilita a visualização e configuração de quadrículas e guias a partir de submenus Grid e Guides Insert: permite inserir objectos no filme, assim como novos fotogramas, camadas, acções, cenas, etc. Modify: a opção Transform permite modificar os gráficos existentes no filme e a opção Bitmap >Trace Bitmap converte os gráficos em mapas vectoriais. As restantes opções permitem modificar as características dos elementos da animação (suavizar, optimizar...) ou do próprio filme (camada, cena...) Text: as suas opções afectam a edição do texto. Commands: permite administrar os Comandos (conjunto de instruções armazenadas que permitem simular o que um utilizador pode introduzir no ambiente de edição) que tenham sido armazenados na animação, obter outros novos na página da Adobe ou executar os já existentes. Control: permite modificar as propriedades de reprodução do filme:Play, Rewind, Test Movie, etc. Deby: O Flash inclui um depurador independente para Action Script 3.0, que é uma linguagem de programação específica para ficheiros FLA, e que permite incluir pontos de controlo e seguir passo a passo a execução de um ficheiro de animação. Window: permite, para além das opções clássicas de distribuição de janelas, incluir acessos directos a todos os painéis. Help: permite, aceder a toda a ajuda disponibilizada pela Macromedia, desde o manual até ao dicionário de Action Script, passando por tutoriais, lições orientadas, etc.

B. BARRA DE FERRAMENTAS (TOOLBAR) A barra de ferramentas, como qualquer outro painel, pode ser colocada quase em qualquer zona do ecrã, bem como ser redimensionada ao gosto do utilizador.

10 ESINE

Painel de ferramentas. As ferramentas contidas neste painel podem ser agrupadas em quatro secções: A secção Ferramentas (Tools), que contém elementos como Desenho, Pintura, Selecção, etc. No total, há 16 ferramentas diferentes nesta secção.

Dezasseis ferramentas diferentes na secção ferramentas (Tools). Seleccionando qualquer delas, ao mesmo tempo que se carrega no botão esquerdo do rato, aparece uma breve descrição da ferramenta.

– A secção Ver (View) contém ferramentas para ampliar e reduzir, bem como para movimentar a janela da aplicação.

Secção Cores (Colors) contém modificadores das cores de traço e enchimento.

11 ESINE

Secção Opções (Options).mostra os possíveis modificadores da ferramenta seleccionada, os quias afectam as operações de pintura ou edificação da referida ferramenta.

Descrição das ferramentas (Tools). A seguir, descrevem-se algumas das ferramentas mais utilizadas, que são no essencial as mesmas ferramentas que existiam no Flash MX 2004. O flash incorpora várias ferramentas para desenhar formas livres ou linhas precisas, traçadas, bem como para pintar objectos. Ferramenta Seta (Selection): é a usaremos para seleccionar objectos do palco. É conveniente esclarecer as formas de seleccionar objectos. Se, por exemplo, desenhamos um quadrado notamos que : - Com um clique no centro do quadrado, seleccionamos apenas o enchimento do mesmo.

- Com um clique sobre o contorno do quadrado, seleccionamos apenas um lado do contorno do objecto, deixando por seleccionar as restantes linhas do contorno do mesmo. - Com um duplo clique sobre o contorno do objecto, seleccionamos todas as linhas do quadrado. Com um duplo clique sobre o enchimento do quadrado, seleccionamos todo o objecto (enchimento e linhas de contorno). - Se arrastarmos o cursor num ponto do palco, observamos que se vai desenhando automaticamente um quadrado com linhas pontilhadas Deste modo, quando deixamos de premir o botão do rato, todos os objectos que se encontrem dentro deste quadrado pontilhado estarão seleccionados. - Além disso, com a ferramenta Seta podemos modificar segmentos ou traçados, se posicionarmos o cursor num dos cantos do objecto e o arrastarmos. As opções da ferramenta encontramo-las na secção Options da barra de ferramentas. Através de Snap to Objects o objecto seleccionado com a seta adere aos objectos mais próximos.

12 ESINE

A seguir, descrevem-se algumas das ferramentas mais utilizadas. Ferramentas Subselecção (Subselection): com esta ferramenta, seleccionamos os pontos que darão forma aos polígonos, denominados «pontos de âncora». Estes pontos irão permitir-nos retocar os objectos, uma vez desenhados. Ferramentas Linha (Line), Oval (Oval) e Rectângulo (Rectangle): estas ferramentas servem para desenhar formas geométricas básicas. É de realçar que, na presente versão do Flash, se incluiu, juntamente com a ferramenta Rectângulo, uma nova ferramenta denominada ferramenta Polígono/Estrela (Polystar) que serve para desenhar polígonos ou estrelas. Para activar a ferramenta

Opção de ferramenta Rectângulo (Rectangle). Polígono/Estrela, premimos o botão do rato sobre a ferramenta Rectângulo e seleccionamos a ferramenta Polígono/Estrela no menu pendente. Ferramenta Texto (Text): utiliza-se esta ferramenta tanto para introduzir caracteres soltos com o objectivo de fazer logotipos ou anagramas, como para escrever palavras ou blocos de texto. Caso se pretenda desactivar a suavização automática dos textos (especialmente problemática com fontes pequenas ou médias, que se vêem borradas), pode-se fazê- lo a partir da barra de propriedades da ferramenta Texto, no menu de «suavização» (anti-alias), seleccionando Texto de mapa de bits [sem suavização] (Bitmap text [no anti-alias]).

13 ESINE

Opção de suavização de texto Quando se utiliza uma ferramenta de Flash, o painel Propriedades (na parte inferior do ecrã, geralmente) apresenta a configuração associada a essa ferramenta. Por exemplo, se se escolhe a ferramenta Lápis, o painel de propriedades mostra as características da barra de propriedades do texto, o qual permite a selecção dos atributos de enchimento e traço. As restantes ferramentas não tiveram alterações, relativamente ao Flash MX 2004.

Opção de ferramenta Lápis (Pencil)

14 ESINE

C.LINHA DE TEMPO (TIMELINE)

As principais alterações relativamente ao Flash MX2004.são:

Linha de tempo (Timeline) com fotogramas chave (Keyframes e fotogramas normais (Frames).

Menu de fotograma (Frame). Para movermos um fotograma chave ou uma sequência de fotogramas com o respectivo conteúdo, seleccionamo-los e arrastamo-los até à posição desejada.

D. UTILIZAÇÃO DO PAINEL PROPRIEDADES (PROPERTIES)

Opção properties dentro do menu principal Windows

15 ESINE

Opção Properties dentro do menu principal Window. – Na opção Propriedades introduz-se o comentário ou a etiqueta de fotograma na caixa de

texto Etiqueta (Label) de fotograma. Para converter o texto num comentário, colocam-se duas barras inclinadas (//) no início de cada linha.

Fotograma com a etiqueta criada «exemplo etiqueta».

E.UTILIZAÇÃO DE CAMADAS (LAYERS)

Principais alterações relativamente ao Flash MX 2004.

Camadas ou layers dentro de uma sequência.

16 ESINE

Opção para criar uma camada.

Visualização de camadas. – Fazendo clique no ícone Mostrar ou ocultar Camada ou pasta na linha de tempo (há que fazer clique na coluna do olho situada à direita do nome da camada ou pasta). – Fazendo clique no ícone do olho para ocultar todas as camadas e pastas. Fazer clique de novo para mostrá- las. – Arrastando o ponteiro pela coluna do olho para mostrar ou ocultar várias camadas ou pastas. – Fazendo clique, com a tecla Alt (Windows) ou Option (Macintosh) pressionada, na coluna do olho situada à direita do nome de uma camada ou pasta para ocultar todas as outras camadas e pastas. Fazer clique de novo com a tecla Alt ou Option pressionada para mostrar todas as camadas e pastas.

Visualização de camadas sem contorno (à esquerda) e com contornos (à direita).

17 ESINE

Mudança do nome de uma camada Como copiar uma camada: primeiro, faz-se clique com o botão esquerdo do rato sobre a camada que se quer copiar na linha de tempo. Vêem-se realçados todos os fotogramas pertencentes à camada seleccionada. Depois, faz-se clique com o botão direito do rato sobre qualquer fotograma seleccionado, e no menu pendente escolhe-se Copy Frames.

Copiar uma camada

Reproduzir uma cena

18 ESINE

Testar o Filme (Test Movie)

Pré visualização de um filme num browser Web.

Opções para guardar, exportar e publicar um filme Flash.

19 ESINE

– Uma breve descrição do modelo na caixa de texto Description (255 caracteres, no máximo). A descrição será mostrada quando se seleccionar o modelo na caixa de diálogo «New from Template».

Opção para guardar como modelo (template).

Formatos para exportar como imagem.

Formatos para exportar como filme.

20 ESINE

Diferentes painéis da opção Window. – A partir do menu pendente do painel, que se abre fazendo clique sobre a pequena seta situada no canto superior direito.

Exemplo de painel suspenso cor (color) e zona de painéis à direita e na parte inferior.

Exemplo de painel suspenso cor (color) e zona de painéis à direita e na parte inferior.

21 ESINE

– Janela > Ambiente de trabalho > Novo ambiente de trabalho (Window > Workspace > New workspace). – Janela > Ambiente de trabalho > Administrar ambientes de trabalho (Window > Workspace > Manage workspaces). – Selecciona-se o ambiente que se deseja restaurar. Para eliminar um desenho de painel personalizado: – Janela > Ambiente de trabalho > Administrar ambientes de trabalho. Selecciona-se o ambiente que se deseja eliminar.

Exemplo do painel Biblioteca (library).

Painel Acções (Actions).

22 ESINE

As características que o painel mostra são as do documento que está a ser editado. Por exemplo, na parte superior mostra o nome do documento e, mais abaixo, a velocidade de reprodução medida em fotogramas por segundo e o seu tamanho em pixéis.

F.O PALCO E A Á REA DE TRABALHO

Principais alterações realivamente ao Flash MX 2004. Ferramenta Zoom. – Para aumentar ou reduzir com uma determinada percentagem: View > Magnification e selecciona-se uma percentagem no submenu.

Opção aumentar e reduzir.

23 ESINE

Ferramenta Mão (Hand). – Na barra de ferramentas, selecciona-se a ferramenta Mão. Para alternar temporariamente entre outra ferramenta e a ferramenta Mão mantém-se pressionada a barra de espaços e faz-se clique na ferramenta da barra de ferramentas. Arrasta-se o palco. Para activar e desactivar o ajuste às linhas da quadrícula (grid): menu View > Grid > Show Grid. – Anula-se ou selecciona-se Ajustar à quadrícula (Show Grid) para activar ou desactivar o ajuste às linhas da quadrícula.

Opção de mostrar ou ocultar réguas (rulers). Na imagem podem ver-se as diferentes opções que permitem mostrar guias ou mesmo personalizá- las.

Opções de guias (guides).

24 ESINE

– Selecciona-se ou anula-se a selecção Ajustar às guias (Show Guides) para activar ou desactivar o ajuste às guias. – Um painel clássico de navegação, com botões que reagem a cliques do rato e enviam a cabeça de leitura do filme para um determinado fotograma.

Painel Acções (Actions) com código de programação ActionScript. 4. APLICAÇÕES DO FLASH A tecnologia Flash é amplamente utilizada nos ambientes de animação e desenho gráfico. Além disso, a possibilidade de acrescentar som às próprias animações torna esta técnica a preferida quando se trata de passar desde simples mensagens animadas para sofisticados conteúdos Web. Um exemplo da sua utilização é aquela que fazem as empresas gráficas ou de publicidade e estudos de animação. Em http://www.micheledauria.com/ pode-se apreciar uma página Web concebida inteiramente em Flash, através da qual, além disso, se mostram diferentes projectos realizados por esta agência criativa. Página Web de uma agência criativa em Flash. Outra utilização generalizada do Flash ocorre para a realização de vídeos promocionais. Neste caso, em http://soytuaire.labuat.com pode ver-se um vídeo publicitário completo desta artista em que um pincel dança ao som da música e onde o próprio utilizador pode movê- lo à sua vontade. É realmente uma pequena obra de arte. O âmbito da publicidade tem um grande aliado nesta tecnologia, graças aos resultados atractivos que permite alcançar. Outra área que constitui um exemplo interessante da utilização do Flash é a da promoção de conteúdos educativos. Assim, por exemplo, em http://cyber.law.harvard.edu/blogs/gems/ion/secreativo.swf mostra-se um vídeo de uso das licenças Creative Commons. Há muitas instituições educativas que utilizam o Flash, sobretudo nas suas páginas iniciais, para as tornar mais atractivas e acrescentar dinamismo às suas apresentações institucionais. É o caso da UAL, cujo site incorpora parcialmente esta tecnologia.

25 ESINE

UAL, Universidade Autónoma de Lisboa com conteúdos Flash. As grandes empresas e corporações também utilizam a tecnologia Flash para melhorar a sua imagem gráfica e dotar os seus sites de maior interactividade. No entanto, o Flash nem sempre é sinónimo de espectaculares composições gráficas. Em alguns casos, é usado apenas para determinadas zonas da página Web, alinhadas com a imagem corporativa da empresa, mas nas quais se pretende incluir alguns efeitos de animação. Gráfico animado alinhado com a imagem corporativa em www.everis.pt. O sector do turismo é também um dos grandes utilizadores do Flash nos seus sites. Um exemplo pode ser encontrado em http://www.solarbica.com. Noutras ocasiões, o uso do Flash é um meio para criar simpáticas animações e clips quase dignos do cinema. É o que acontece no site de Alan Becker, com o seu famoso «Animator vs. Animation II», em que um simpático desenho animado luta contra todo o ambiente de desenvolvimento Flash. Por último, não devemos deixar de mencionar que o Flash também é um meio adequado para criar interactividades lúdicas e jogos na Rede.