Baixe Tutorial sobre flash e outras Notas de estudo em PDF para Cultura, somente na Docsity!
Prólogo do Manual de Flash
Começamos o tutorial de Flash... Bem-vindo ao manual de Flash de CriarWeb.
O objetivo deste manual é proporcionar os fundamentos necessários para que você possa se desenvolver facilmente em torno do trabalho de Flash. Ao longo dos artigos, vamos abordar os conceitos básicos necessários para o bom uso desta tecnologia e descobriremos o emprego das ferramentas mais utilizadas normalmente.
Este tutorial não pretende ser uma descrição exaustiva da aplicação Flash. Desejamos mais deixar sentadas as noções que os ajudarão a ter as idéias claras na hora de planejar seu projeto. Portanto, deixamos a vocês mesmos a oportunidade de ver a fundo todas as possibilidades que este programa oferece, algo que se pode descobrir à medida que se cria suas próprias animações.
A parte deste manual, os elementos que você necessita para criar suas animações são poucos: a aplicação Flash, que pode ser baixada em versão de prova no site de Macromedia, um navegador web e um editor de texto como o bloco de notas de Windows.
O que é Flash
Descrição desta tecnologia vetorial. Provavelmente, um dos avances mais importantes em matéria de desenho no web foi o aparecimento da Error! Hyperlink reference not valid. desenvolvida por Macromedia denominada Flash.
Flash é a tecnologia mais utilizada no Web que permite a criação de animações vetoriais. O interesse no uso de gráficos vetoriais é que estes permitem realizar animações de pouco peso, ou seja, que demoram pouco tempo para ser carregadas.
Como talvez vocês saibam, existem dois tipos de gráficos:
Os gráficos vetoriais , nos quais uma imagem é representada a partir de linhas (ou vetores) que possuem determinadas propriedades (cor, espessura...). A qualidade deste tipo de gráficos não depende do zoom ou do tipo de resolução com o qual se esteja olhando o gráfico. Por muito que nos aproximemos, o gráfico não se pixeliza, já o computador traça automaticamente as linhas para esse nível de proximidade.
As imagens em mapa de bits. Estes tipos de gráficos se assemelham a uma espécie de quadrículo no qual cada um dos quadrados (píxels) mostra uma cor determinada. A informação destes gráficos é salva individualmente para cada píxel e é definida pelas coordenadas e cor de tal píxel. Estes tipos de gráficos são dependentes da variação do tamanho e resolução, podendo perder qualidade ao modificar sucessivamente suas dimensões. Sendo assim, Flash se serve das possibilidades que oferece trabalhar com gráficos vetoriais, facilmente redimensionáveis e alteráveis por meio de funções, portanto de um armazenamento inteligente das imagens e áudios empregados em suas animações por meio de bibliotecas, para otimizar o tamanho dos arquivos que contém as animações.
Esta otimização do espaço que ocupam as animações, combinada com a possibilidade de carregar a animação ao mesmo tempo em que esta se mostra no navegador (técnica denominada streaming), permite fornecer elementos visuais que dão vida a uma web sem que para isso o tempo de carregamento da página se prolongue até limites insuportáveis para o visitante.
Ademais deste aspecto meramente estético, Flash introduz em seu entorno a possibilidade de interagir com o usuário. Para isso, Flash invoca uma linguagem de programação chamada Action Script. Orientado a objetos, esta linguagem tem claras influências do Javascript e permite, entre outras muitas coisas, organizar o preenchimento de formulários, executar distintas partes de uma animação em função de eventos produzidos pelo usuário, ir a outras páginas, etc.
Deste modo, Macromedia põem a nossa disposição uma tecnologia pensada para fornecer um bom visual a nossa web e ao mesmo tempo, nos permite interagir com nosso visitante. Obviamente, não se trata da única alternativa de desenho vetorial aplicada ao Web, mas sem dúvida, trata-se da mais popular e mais completa delas.
Este menu aparecerá unicamente na primeira vez que abrirmos Flash, no obstante, poderemos acessá-lo através da barra de ferramentas na seção Ajuda>Bem-vindo.
Já dentro do programa, após haver fechado alguns painéis com o objeto de dispor de espaço de trabalho, faremos frente a uma interface como a que se mostra na figura:
Dentro desta interface, podemos distinguir três partes principais:
O palco Trata-se do espaço no qual realizaremos todas as tarefas de edição de gráficos. De certa forma é como o papel no qual desenharemos o que faça falta.
A linha de tempo Esta seção é onde poderemos organizar no tempo cada uma das imagens desenhadas no palco. Podemos subdividi-la em duas partes: A parte esquerda, onde poderemos organizar as camadas e a parte da direita que fica reservada a gestão dos fotogramas. Ambos elementos, camadas e fotogramas serão tratados mais adiante.
A caixa de ferramentas Aqui encontraremos as ferramentas de edição gráfica que Flash coloca a nossa disposição. Como pode se observar, Estas são muito parecidas as que podemos encontrar em outros programas de edição gráfica que seja vetorial ou não.
Camadas e fotogramas em Flash
Explicamos os conceitos de camadas e fotogramas e seu uso. Como dissemos no capítulo anterior, a linha de tempo é onde poderemos organizar a sucessão de imagens que dão lugar a uma animação. Neste capítulo introduziremos os conceitos de camada e fotograma, vitais para uma compreensão do funcionamento de Flash.
De certa forma, Flash trabalha como se fosse um filme. Uma animação é uma sucessão de imagens fixas que, ao passar rapidamente umas atrás das outras, dão a impressão de um movimento. Cada uma destas imagens fixas é chamada também fotograma. Os fotogramas são representados sob a forma de retângulos na parte direita do palco.
Nestes retângulos podemos alojar três tipos diferentes de imagens:
Imagens chaves Trata-se das imagens que nós mesmos desenharemos
Imagens fixas São as imagens chaves copiadas nos fotogramas seguintes ao da primeira imagem chave de forma a produzir um efeito de objeto estático.
Imagens de interpolação Trata-se de imagens calculadas por Flash que permitem a transição gradual entre duas imagens chaves. Este tipo de imagens muito úteis já que se geram automaticamente e proporcionam um efeito suave de movimento ou transformação.
Por outro lado, uma animação está geralmente constituída de uma variedade de objetos diferentes, cada um dos quais se introduz em um momento diferente e apresenta um comportamento independente ao resto dos objetos. De forma a organizar e editar todos estes elementos, Flash permite o uso de camadas ou decalques.
Assim, uma animação Flash está composta de uma superposição de camadas em cada uma das quais introduziremos um objeto que terá sua própria linha de fotogramas. Estas camadas nos permitem trabalhar a animação em distintos planos independentes.
Por padrão, ao começar uma nova cena encontraremos em nossa linha de tempo uma só camada. Progressivamente iremos introduzindo mais camadas que permitam separar cada um dos elementos da animação: objetos, fundo, áudios ou trajetórias.
Um uso inteligente das camadas é a base para criar animações de qualidade.
Minha primeira animação em Flash I
Criação de um símbolo em nossa biblioteca flash. Depois de haver introduzido os conceitos básicos de Flash, vamos colocar em prática alguns deles de forma a começar a familiarizarmos com a interface.
Para começar, geraremos um documento em branco por meio de:
Error! Hyperlink reference not valid.> Novo
Como podemos observar na linha de tempo, nossa animação consta de uma só camada e um único fotograma representado por um retângulo com um círculo. Este círculo significa que se trata de um fotograma que contem uma imagem chave vazia.
A animação que pretendemos criar consiste em um movimento de translação de uma esfera com uma trajetória elíptica. Sendo assim, o primeiro que devemos fazer é desenhar a esfera. Entretanto, para começar com os bons costumes, não desenharemos a esfera diretamente sobre nosso fotograma vazio, e sim, criaremos um símbolo em nossa biblioteca.
Para criar nosso símbolo na biblioteca:
Janela > Biblioteca
Chegado a este ponto veremos aparecer na tela uma janela como a que se vê na ilustração.
Para inserir o símbolo podemos fazer a partir do botão com uma cruz situada na parte inferior esquerda da janela da biblioteca, ou então ir à barra de menus e fazer:
Inserir > Novo Símbolo
Uma nova janela de diálogo aparece diante de nossos olhos (ver figura abaixo). Nela poderemos definir o nome (para este caso a chamaremos esfera) e o comportamento (escolheremos gráfico). Por agora não entraremos na explicação da opção comportamento, já o veremos mais adiante.
Ao preencher devidamente a janela anterior e Aceitar , veremos como o palco se engrandece e a barra superior do palco nos mostra a palavra Esfera. O que aconteceu é que saímos de nossa primeira animação para irmos para um espaço no qual podemos editar o símbolo que quisermos criar. Portanto, colocamos mãos a obra com nosso trabalho de artistas.
Para desenhar a esfera vamos nos servir das ferramentas de desenho. Começamos por escolher a ferramenta oval , representada por um círculo. Uma vez escolhida vamos ao palco e apertando a tecla maiúsculas e clicando o botão esquerdo do mouse (o único para os usuários Mac), deslocaremos o mouse para qualquer direção. Veremos aparecer um círculo com as cores definidas na seção cores da barra de ferramentas.
Agora, para dar a sensação de perspectiva à esfera, vamos colori-la em seu interior usando um degradado radial. Para isso, visualizamos o painel mistura de cores :
Janela > Mistura de cor
Chegando aqui, veremos uma janela como a da figura:
Sugerimos repetir este processo de preenchimento do círculo com um degrade brincando com as opções que nos oferece o painel de mistura de cores. Podemos ver que é possível acrescentar mais casinhas para conseguir um efeito de coroas ou então mudar o tipo de degrade a linear e mais coisas...
Depois de nos deixarmos levar por nossa veia criativa podemos nos voltar a coisas mais sérias. Para começar, podemos alinhar a esfera com a cruz que define o ponto de alinhamento do símbolo. Para isso, escolheremos a ferramenta seta e selecionaremos a esfera deslocando o mouse ao mesmo tempo que mantemos clicado o botão esquerdo. Para mover a esfera faremos da mesma forma, deslocando o mouse até o lugar apropriado mantendo o botão esquerdo pressionado. Podemos tornar preciso o deslocamento usando as setas do cursor que nos permitirão deslocarmos píxel por píxel.
Minha primeira animação em Flash II
Vamos começar a trabalhar com a animação propriamente dita. Criação de imagens chave. Ok, já definimos o símbolo na biblioteca. Agora vamos começar a trabalhar com a animação propriamente dita. A primeira coisa que devemos fazer é sair do espaço de criação do símbolo e irmos para o palco da animação. Para isso, clicaremos na palavra Palco 1 que aparece na parte superior esquerda do palco.
Já dentro do palco, vamos incluir no primeiro fotograma o símbolo que acabamos de criar. Antes de nada, iremos à janela biblioteca (se tiver fechada poderá ser aberta com Janela > Biblioteca ) e selecionaremos o símbolo esfera. A seguir, clicamos e arrastamos o símbolo até o palco. O resultado deveria ser algo como o que se mostra na Error! Hyperlink reference not valid. inferior:
Podemos observar que o círculo vazio do primeiro fotograma se converteu agora em um círculo cheio, o que significa que a imagem chave não esta vazia.
Passamos agora a estudar o tipo de animação que vamos fazer. Como dissemos, pretendemos simular um movimento de translação da esfera com uma trajetória elíptica, dando a impressão de um círculo em perspectiva. Esta animação poderia ser definida por três Error! Hyperlink reference not valid. chave:
A esfera situada em primeiro plano ao princípio de seu movimento.
A esfera situada em segundo plano na metade de seu ciclo de translação.
A esfera chegada ao final do ciclo, aproximadamente na mesma posição que a primeira esfera.
A seguir vamos criar o terceiro e último fotograma chave, correspondente ao momento em que a esfera está a ponto de completar o ciclo. Este fotograma deveria à princípio se parecer ao primeiro com a diferença de que a esfera não chegou a completar o ciclo, e sim que está perto de consegui-lo. Realizaremos os seguintes passos:
Inserimos um fotograma chave vazio no fotograma 29 ( Inserir>Fotograma chave vazio )
Voltamos ao fotograma 1 e o copiamos ( Editar>copiar )
Voltamos ao fotograma 29 e o colocamos ( Editar>colar ) O resultado é um fotograma idêntico ao 1 no qual deveremos mover ligeiramente a ocorrência à esquerda, algo que faremos mais tarde.
Minha primeira animação em Flash III
Criação de um guia de movimento. Como já dispomos das Error! Hyperlink reference not valid. chave que definem a animação, o que necessitamos agora é definir uma trajetória elíptica que as uma. Esta trajetória tem de ser definida em uma camada especial chamada guia de movimento. O movimento não é nada mais do que uma camada que contém uma linha sobre a qual podemos colocar nossos objetos de forma que tal objeto se mova de uma posição a outra respeitando a trajetória definida por esta linha.
No nosso caso, dado que o que buscamos é uma trajetória cíclica, para não confundir ao objeto definiremos duas linhas distintas, correspondentes a cada meia volta. Se não tomássemos esta precaução, o objeto teria dois possíveis sentidos para chegar a uma mesma posição. Passemos então a definir estas linhas:
Criamos o guia de movimento. Para isso, selecionamos a camada 1 (ou onde tivermos criado nossas imagens chave ) e fazemos Inserir>guia de movimento. Constatamos o aparecimento de uma nova camada Guia: Camada 1 (ver figura).
Selecionamos o primeiro fotograma desta nova camada e desenhamos uma elipse sem preenchimento. Podemos nois servir da ferramenta oval utilizada para a criação da esfera, mas desta vez não escolhemos nenhuma cor na paleta de preenchimento (a ausência de cor vem simbolizada por um quadro branco barrado em diagonal por uma faixa vermelha). O resultado é uma figura tal como esta:
Minha primeira animação em Flash IV
Criando uma interpolação. Chegando a este ponto, podemos começar a definir a primeira meia volta da esfera. Para gerar o movimento existente entre os fotogramas chave, temos que criar o que se denomina uma interpolação de movimento. Como já dissemos, isso é algo que Flash calcula automaticamente, evitando a modificação sistemática de cada um dos fotogramas intermédios que formam parte da seqüência. Para criar a interpolação de movimento, selecionaremos os fotogramas da camada 1 e faremos:
Inserir>Criar interpolação de movimento.
Feito isso, poderemos constatar o aparecimento da camada 1 de uma seta entre o fotograma 1 e 15 e outra entre o 15 e o 29. Se agora vamos a algum dos fotogramas intermédios, veremos que a imagem que contém não é a mesma que a dos fotogramas chave 1 ou 15, e sim, um intermédio de posição e tamanho entre elas. Como se pode ver, o objeto se deslocaria desde 1 até 15 e seguidamente de 15 a 29 seguindo uma linha reta. Para obrigá-lo a dotar uma trajetória elíptica como a definida no guia de movimento, teremos que ir a cada uma das imagens chave (1, 15 y
e , usando a ferramenta seta, colocaremos o centro do objeto sobre a linha da elipse em cada uma das extremidades correspondentes.
Podemos comprovar que o objeto está bem colocado na trajetória ao tentar movê-lo fora da linha, volta a se colocar automaticamente sobre ela.
Agora só nos resta ocultar a camada da trajetória. Isto pode ser feito selecionando-a e clicando sobre o ponto que se encontra abaixo. O ponto se converte em uma cruz, que significa que a camada não é visível, embora, é claro, que segue existindo.
Já temos a animação construída. Para prová-la podemos fazer rapidamente:
Controle>Provar cena
Veremos como saltamos para outra nova janela que nos mostra a cena criada, tal como a veríamos na realidade. Esta janela nos oferece múltiplas possibilidades que já serão abordadas em outros capítulos. No obstante, aconselhamos dar uma olhada aos tipos de opções que propõe.
O resultado é uma animação como esta:
Se desejar ver a animação diretamente no navegador, é possível faze-lo selecionando:
Arquivo>Pré-visualização da publicação>HTML
Chegando até aqui, vocês descobrirão algumas das muitas possibilidades que Flash oferece para a criação de animações e, o que é mais importante, estarão mais familiarizados com o tipo de técnicas e conceitos que emprega.
Colocar filmes Flash em nossas páginas
Um pequeno truque para conseguir o código necessário para incrustar um filme Flash dentro de uma página web.
Colocar filmes Flash em nossos arquivos html, asp, Error! Hyperlink reference not valid. , etc; poderia ser uma das principais perguntas que fazemos, quando começamos a conhecer grandioso programa, e faze-lo é mais simples do que parece. Antes devemos ter em conta que devemos seguir algumas regras para que tudo funcione corretamente. Quando criamos um filme com Flash, este gera um arquivo com extensão ".fla", este nos permite criar o filem e modificá-lo. Outro arquivo que se gera é o que tem a extensão ".swf", este se compõe no momento que provamos o filme e nos ajuda a ver o resultado das criações e modificações dos arquivos ".fla". Finalmente podemos gerar um arquivo "html", que se compõe quando publicamos nossos filmes e nos ajuda a ter uma idéia mais clara de como serão vistos na web.
Quando seu filme Flash esteja terminado, salvo e testado (CTRL+Enter), você deve publicá-lo (CTRL + F12).
No menu principal de nosso explorador, devemos clicar em "Ver", depois clicar em "Código fonte", isto faz com que se execute o "Bloco de notas", o qual nos mostrará o código html dos filmes.
Dentro do conteúdo do Bloco de notas, você deve procurar as etiquetas , copie o conteúdo que se encontra entre essas etiquetas (logicamente as etiquetas deverão ser incluídas) e finalmente cole em seus arquivos. Isso é tudo, mas lembre-se que se seguir este truque e se não editar a etiqueta
Nota: Outra maneira muito simples para inserir uma animação Flash em uma página web é utilizar o programa Dreamweaver, também desenvolvido pela empresa Macromedia. Em tal programa existe um botão, na janela de objetos comuns, que nos permite selecionar o arquivo Flash (Com extensão .swf) que desejarmos inserir na página web.
Não é necessário subir o arquivo .fla ao seu Error! Hyperlink reference not valid. , já que o .swf e .html não o necessitarão.
Olhe para a linha do tempo (Timeline), como se pode notar é diferente à linha do tempo da Cena
A linha do tempo, do palco para criar botões é parecida a seguinte imagem:
Expliquemos o gráfico anterior:
Devemos entender que Repouso, Sobre, Pressionado e Zona ativa são os quatro estados de um botão. Vejamos a seguir, o que representa cada estado.
Repouso: é quando o mouse não está colocado sobre nosso botão ou não se clicou sobre ele.
Sobre: é quando o mouse está colocado sobre o botão, mas ainda não se clicou sobre ele.
Pressionado: logicamente, é quando se clica sobre o botão.
Zona Ativa: como o próprio nome indica, é quando o botão está ativo.
Continuemos com a criação de nosso "botão 1".
A cabeça leitora, na linha do tempo tem que estar assinalando o estado de Repouso.
3- Clique sobre a ferramenta de Retângulo (Rectangle Tool), que se encontra no Painel de Ferramentas.
4- Desenhe um retângulo no centro da área de trabalho, e coloque a cor azul.
5- Depois pressione a tecla F6; isto fará com que a cabeça leitora na linha do tempo passe ao estado Sobre.
Como poderá se notar, o botão se copia, portanto não será necessário fazer um novo desenho.
6- Ainda estamos no estado Sobre, se não tiver selecionado o botão, faça-lo (com a ferramenta Seta e clique duas vezes sobre nosso desenho), logo dirija-se ao Preenchimento de Cor que se encontra na seção cores do Painel de Ferramentas, e escolha a cor vermelha, como se mostra a seguir:
