Docsity
Docsity

Prepare-se para as provas
Prepare-se para as provas

Estude fácil! Tem muito documento disponível na Docsity


Ganhe pontos para baixar
Ganhe pontos para baixar

Ganhe pontos ajudando outros esrudantes ou compre um plano Premium


Guias e Dicas
Guias e Dicas

Apostila Flash Professional 8, Notas de estudo de Cultura

Apostila da versão 8 do Flash

Tipologia: Notas de estudo

Antes de 2010
Em oferta
30 Pontos
Discount

Oferta por tempo limitado


Compartilhado em 22/09/2009

yeger-markus-reis-9
yeger-markus-reis-9 🇧🇷

5

(1)

3 documentos

Pré-visualização parcial do texto

Baixe Apostila Flash Professional 8 e outras Notas de estudo em PDF para Cultura, somente na Docsity! macr ta [is f FLASH Professional 8 2 Índice ÍNDICE .......................................................................................................................................... 2  INTRODUÇÃO .............................................................................................................................. 4  O que é Shockwave Flash .............................................................................. 4  O AMBIENTE DO FLASH ............................................................................... 4  Barra de ferramentas ...................................................................................... 6  Caixa de Ferramentas .................................................................................... 7  Linha do Tempo .............................................................................................. 7  Bibliotecas ...................................................................................................... 8  Painéis ............................................................................................................ 9  Área de Trabalho ............................................................................................ 9  Ferramentas de Desenho e suas propriedades ............................................ 10  Manipulando Objetos .................................................................................... 17  Trabalhando com objetos externos ............................................................... 19  SÍMBOLOS ................................................................................................................................. 20  Os tipos de Símbolos: ................................................................................... 20  Filtros ........................................................................................................ 24  ANIMAÇÃO ................................................................................................................................. 25  Animação Quadro a Quadro ......................................................................... 25  Animação com Interpolação de Movimento .................................................. 25  Onion Skin .................................................................................................... 27  Propriedades da barra de ferramentas do quadro .................................... 28  Camadas ...................................................................................................... 29  Camadas Guia .............................................................................................. 29  Máscaras ...................................................................................................... 34  Interpolação de Forma .................................................................................. 35  Trabalhando com imagens importadas ..................................................... 35  BOTÕES ..................................................................................................................................... 37  CLIPES DE FILME ...................................................................................................................... 38  SONS .......................................................................................................................................... 39  VÍDEOS ....................................................................................................................................... 42  AÇÕES ........................................................................................................................................ 46  O painel Ações ............................................................................................. 46  PRE-CARREGADORES ............................................................................................................. 51  Criando um carregador simples .................................................................... 52  APLICAÇÃO STAND ALONE .................................................................................................... 53  Abaixo seguem os comandos do FS Command ....................................... 54  CENAS ........................................................................................................................................ 55  PUBLICAÇÃO DO FILME .......................................................................................................... 55  CONCLUSÃO ............................................................................................................................. 58  5 trabalhar com o Flash. Na coluna da esquerda podemos abrir um projeto existente, os projetos mais recentes vão aparecer logo abaixo do botão “Open. Na coluna do meio podemos iniciar nossos projetos. A versão 8 do Flash permite além da opção que vamos trabalhar em nosso curso “Flash Document”, temos também as opções: • Flash Slide Presentation • Flash Slide Application • Flash Form Application • ActionScript File • Flash JavaScript File • Flash Project Na coluna da direita temos as opções de modelos de aplicações Flash. Ao clicar em Flash Document ele mostrará a área de composta de diversas janelas e opções. No topo temos a barra de menus, à esquerda caixa de 6 ferramentas e no centro a linha do tempo, e na grande área branca a área de trabalho. Barra de ferramentas Para exibir a barra de ferramentas no Flash, clique no Menu , Window, Toolbars, Main Na Barra de ferramentas além dos botões padrões como Novo, Abrir, Salvar, etc..., temos botões exclusivos do FLASH como, por exemplo, Encaixar (formato de imã) que auxilia no posicionamento dos elementos na tela do filme. 7 Caixa de Ferramentas A caixa de Ferramentas do Flash 8 é composto de quatro subdivisões: Ferramentas (Tools), Exibir (View), Cores (Colors) e Opções (Options). A área de ferramentas é composta dos botões de desenho e manipulação dos desenhos feitos na área de desenho do FLASH. A área Exibir permite modificar a forma de visualizar a área de desenho do Flash permitindo mover o desenho ou ampliá-lo com a lupa. Na área de cores podemos definir cores de linhas e cores de preenchimento dos desenhos feitos no FLASH. Opções tratam das opções de desenho selecionado. Ainda com relação à caixa de ferramentas, ao posicionar a ponta do mouse sobre uma ferramenta ela mostra o nome da ferramenta e uma letra entre parênteses , ao pressionar a tecla correspondente à letra ela será marcada como ativa automaticamente. Linha do Tempo A Linha do tempo é utilizada na criação de animações. Através dela podemos definir qual será a mudança e/ou caminho a ser especificado pelo objeto do filme. Podemos través de a linha tempo utilizar camadas para melhor agrupamento e movimento dos objetos. A Timeline é composta dos seguintes elementos, na parte superior temos o nome do arquivo aberto. Na direita temos o botão de controle de cenas e de controle de objetos do Flash e no final a opção de ZOOM da área de 10 que está selecionado. Ferramentas de Desenho e suas propriedades A primeira ferramenta a ferramenta seta é utilizada para selecionar os objetos de sua área de trabalho, podemos selecionar os objetos clicando sobre eles ou simulando um contorno em forma de retângulo sobre o objeto a ser selecionado. Os objetos no Flash diferenciam contorno de preenchimento então se você clicar no meio de um objeto você apenas selecionará o preenchimento. Para poder selecionar ambos é necessário um duplo clique ou simular um contorno sobre ambos com a ferramenta seta. A ferramenta ao lado da seta em forma de uma flecha branca é a ferramenta subselecionar que permite trabalhar com os nós de seu objeto. Abaixo temos a ferramenta FreeTransform . Ao clicar sobre ela , será mostrado alças de dimensão em volta de seu objeto. Na parte de Options da caixa de ferramentas ele mostra as opções da ferramenta. 11 A primeira opção é a “Rotate and Skew”, que permite rotacionar e inclinar a ferramenta. A segunda opção “Scale” permite dimensionar a forma selecionada. Se redimensionar seu objeto com a tecla ALT pressionada ao dimensionar para um lado ele faz a mesma dimensão para o outro lado. A terceira opção é a opção Distort que permite distorcer seu objeto em perspectiva. A última opção é a Envelope que vai permitir editar o objeto com curvas de bezier. Caso você já tenha convertido seu objeto em símbolo as opções disponíveis serão somente “Rotate and Skew” e “Scale”. Ao lado temos a ferramenta “Gradient Transform Tool” , veremos o uso dessa ferramenta posteriormente. Abaixo temos a ferramenta Linha que permite que se trace linhas e podemos também unir os ponto de uma linha criando assim polígonos. Estando com o a ferramenta encaixar (Imã) ligada - o mesmo encontra-se caixa de propriedades e na barra de ferramentas - ao traçar ele mantém uma “bolinha” na extremidade da linha e quando encaixar ele também a mostrará, isso fará também com que as linhas sempre saiam retas na vertical e diagonal. Esta ferramenta também auxiliará na criação de quadrados e circunferências. Também manterá uma grade invisível em sua tela - o que muitas vezes atrapalha - para o posicionamento de objetos. Para evitar o uso do “imã” você pode desligá-lo ou então utilizar as setas de seu teclado para o posicionamento. A versão 8 do Flash trouxe uma nova ferramenta que permite desenhar os objetos como grupos é a ferramenta “Object Drawing” . Caso essa ferramenta esteja desligada ao desenhar um objeto sobre um existente o novo objeto substituiria a parte sobreposta. Ao lado da ferramenta linha temos a ferramenta Laço que permite fazer seleções irregulares em nossos objetos. 12 Na linha de baixo a ferramenta da esquerda é a ferramenta caneta que permite criar curvas Bezier no Flash e alterar os pontos de um objeto do Flash. Abaixo temos um retângulo e depois do mesmo ter sido alterado com a ferramenta caneta. Ao lado da ferramenta caneta temos a ferramenta Texto.As opções de Texto podem ser Estático, Dinâmico e de Entrada. Texto Estático: É o texto simples com todas as possibilidade de Formatação. Texto Dinâmico: É o texto que recebe informações de uma variável, ou seja, ele lê o texto de um arquivo qualquer que contenha uma variável igual a sua, exemplo de usos para leitura de variáveis de scripts, ASP, PHP, HTML e até mesmo de arquivos TXT, como por exemplo, para textos em barras de rolagem. Texto de Entrada: Permite que se crie uma caixa de texto e que a mesmo comporte-se como campo de formulários, ele permite que o usuário insira informações que serão repassadas também através de variáveis. 15 • Paint Inside: Permite pintar somente dentro. Abaixo temos a ferramenta Tinteiro que permite pintar a cor de contorno dos objetos. Basta selecioná-la e aplicar a cor desejada diretamente na linha de contorno de seus objetos. Ao lado dela temos a ferramenta Balde de Tinta que permite modificar a cor de preenchimento dos objetos O Flash possui para preenchimento as cores da paleta WEBSAFE e também alguns gradientes existentes. Na caixa de opções também podemos definir como deve ser aplicado o preenchimento, em todo o objeto , ou com lacunas. Quando se trabalha com preenchimentos é necessário que se chame à paleta Misturador de Cores, Nesta paleta podemos definir se o preenchimento será sólido, linear, radial ou bitmap. Podemos também atribuir a cor através de seu código RGB, ou hexadecimal, além de aplicar um canal Alpha. Na paleta “Color” a opção padrão inicial é Solid onde podemos definir as cores de contorno e preenchimento pela escolha da cor, códigos RGB e Hexadecimal. A opção Alpha define o grau de transparência da cor. Na opção TYPE temos como padrão SOLID, ao clicar nessa opção podemos mudar para linear que aplicará ao objeto selecionado Ao escolher opção SOLID , será mostrado na opção COLOR a barra de cores gradiente. 16 Você pode observar que temos na opção gradiente duas alças de cores, para alterar a cor de qualquer uma das alças de gradiente, basta clicar sobre ela e escolher a cor desejada. Podemos acrescentar uma alça de gradiente a nossa paleta de cores basta clicar entre uma delas, ele vai criar as outras alças de cores. Para retirar uma das alças basta apenas clicar sobre a alça, manter o mouse pressionado e arrastar para fora da linha. Ao clicar na ferramenta “Gradient Transform Tool” , permite alterar a posição do gradiente dentro de nosso objeto. Ao selecionar o objeto com o gradiente e clicar na ferramenta ele vai mostrar uma alça quadrada e uma redonda em volta do gradiente. A alça quadrada permite aproximar / afastar as cores gradientes, a alça em círculo permite rotacionar o gradiente. Podemos também escolher a opção RADIAL, ao escolher opção RADIAL 17 podemos aplicar as mesmas opções do gradiente LINEAR. Podemos também definir a opção de gradiente e preencher nosso objeto com o balde de tinta. A ultima opção chama-se Bitmap, que permite com o conta-gotas capturar o bitmap. Caso não exista uma imagem dentro do Flash, ao escolher a opção Bitmap ele vai solicitar que se escolha a imagem para servir como preenchimento. A ferramenta conta-gotas permite capturar a cor de um objeto e aplicar dentro de outro, por exemplo, se você importar um bitmap para dentro do flash e depois desejar aplicar este bitmap como preenchimento de um objeto clique sobre o bitmap com o conta gotas, a ferramenta modifica-se imediatamente para o balde de tinta e você pode preencher onde desejar. A ferramenta ao lado o apagador funciona como uma borracha, o cuidado é como apagar é necessário utilizar as opções desta ferramenta , onde você poderá apagar somente contornos, somente preenchimentos. A torneira paga todo um preenchimento ou todo um traço. Para apagar todos os objetos existentes em sua área de Trabalho, basta dar um duplo clique sobre a ferramenta borracha. Manipulando Objetos Ao desenhar no Flash, podemos manipular nossos objetos, tanto na forma, como contorno e preenchimentos. Ao desenharmos linhas, polígonos, retângulos e elipses, podemos alterar a sua forma facilmente com a ferramenta seta. Por exemplo, se clicarmos diretamente na linha a mesma será selecionada, 20 SÍMBOLOS Para podermos trabalhar com animações no FLASH é necessário que quase todos os elementos sejam convertidos para símbolos, pois é através de símbolos que podemos definir qual o comportamento do símbolo: Os três símbolos do FLASH são Gráficos , Botões e Clipes de Filme . Você pode criar o objeto e depois convertê-lo em Símbolo ou através do menu Insert Convert to Symbol criá-lo e depois adicionar ao filme. Ao criar um símbolo ele vai automaticamente para a Biblioteca de Símbolos. Para converter um objeto existente em símbolo basta apenas apertar a tecla de função F8. Os tipos de Símbolos: Gráfico: Este é o tipo mais básico de símbolo, pois ele é praticamente estático, 21 embora possa receber ações para ele, é muito utilizado também dentro dos outros símbolos. Botão: Este símbolo pode receber valores diferentes para estado do botão, normal, ao rola sobre, pressionado e oculto, é muito utilizado para chamar ações. Clipe de Filme: Este tipo de símbolo permite que se crie um filme dentro do símbolo com a vantagem de que ele carrega todo o clipe de filme primeiro e mostra o mesmo no filme todo de uma vez. Ao desenhar seu objeto e pressionar F8, (Menu , Modify Convert to Symbol) ele abre a tela acima, onde é necessário dar um nome ao símbolo (ele sempre trará um nome genérico , como symbol??), o nome é aconselhável manter uma nomenclatura que facilite a sua identificação. Por exemplo Gráficos colocar GRnome, botão BTnome, Clipe de Filme MCnome. No caso do clipe de filme usa-se MC (Movie Clip), é dessa forma que a comunidade de designers e programadores em Flash chama o Clipe de Filme. Abaixo do nome temos a 22 escolha do tipo de símbolo. Ao lado do tipo de símbolo temos a posição de seu centro de Registro, ao padrão é no canto superior esquerdo, esse centro de registro é necessário, pois é a partir dele que seu objeto é carregado. Ao clicar na opção Advanced, abre-se as opções de exportação de nosso objeto para código. Usaremos esse recurso mais a frente. Mesmo depois de pronto podemos alterar as propriedades de nossos símbolos através da biblioteca (atalho CTRL+L ou Menu Window Library), ou mesmo ele estando dentro do filme principal, em ambos os casos basta apenas clicar sobre o símbolo com o botão direito do mouse e depois escolher editar para ambos os casos, e estando o símbolo no filme podemos editá-lo também no local e em uma nova janela. Embora a função inicial do Clipe de Filme era conter animações para se evitar timelines extensas quando fosse necessário uma animação de repetição e gráficos para objetos estáticos, atualmente convencionou-se utilizar somente Clipes de Filme mesmo para objetos estáticos. A razão para essa mudança é pelo fato de que posso controlar meu Clipe de Filme através de programação (linguagem actionscript) e aplicação de filtros e mistura de camadas. Ao criar um símbolo, podemos manipulá-lo pela barra de propriedades. Na barra de propriedades podemos definir a posição X e Y de nosso objeto, a sua largura (W) e altura (H), o comportamento do objeto. Onde está “Instance Name”, é um campo utilizado para dar nome de instância ao objeto, esse campo será utilizado em actionscript. A opção SWAP permite substituir o símbolo na área de edição por outro existente na biblioteca. 25 ANIMAÇÃO Animação Quadro a Quadro A animação quadro a quadro funciona de maneira semelhante a um desenho animado, ou seja, para cada movimento do objeto deverá ser colocado o mesmo dentro de quadro. Para entendermos melhor este processo crie uma circunferência na sua área de desenho. Observe que ao desenhar o objeto no filme do Flash , no primeiro quadro aparece uma bolinha preta , mostrando que no quadro existe um objeto. Para inserir uma instância deste mesmo objeto no próximo quadro, clique com o botão direito do mouse no próximo quadro e escolha Inserir Quadro Chave (tecla de atalho F6). Ele repete o mesmo símbolo. Modifique a cor de seu símbolo. Repita este processo até o quadro 12, alterando a cor de seu objeto a cada quadro. Isto fará com que sua animação possua 1 segundo. Para testar aperte as teclas CTRL+ENTER, isso testa o seu filme e gera um arquivo com a extensão SWF. O arquivo de projeto do Flash possui a extensão FLA, ou seja, ao salvar seu arquivo ele será salvo com essa extensão. Para poder incluir seu arquivo em uma página HTML será necessário transformá-lo para o formato SWF, isso pode ser feito através do teste de seu filme (CTRL+ENTER). Caso você utilize o Dreamweaver ele possui um recurso de inserção do SWF na página que vai gerar todo o código necessário para a exibição do SWF. Podemos também gerar todo o HTML pelo próprio Flash através do recurso de publicação que veremos mais adiante. Quando se trabalhar com animação quadro a quadro não se converte os objetos em símbolos. Animação com Interpolação de Movimento A animação quadro a quadro é perfeita, pois você tem um total controle sobre o filme, mas ao mesmo tempo ela é demorada, pois muitas vezes sua animação terá 200 quadros ou mais então isso se tornaria demorado e com mais possibilidades de erro, embora em muitos filmes é necessário que as 26 animações sejam feitas quadro a quadro. Uma forma de se automatizar este processo é através da animação com Interpolação, ou seja, podemos definir a posição inicial e afinal de nosso objeto e depois podemos fazer a animação. Comece um novo filme e cria uma circunferência com preenchimento ao seu gosto e transforme-a em um símbolo. Crie um novo quadro no quadro 12. Para podermos criar a interpolação de movimento podemos clicar com o botão direito no quadro 1 e escolher “Create Motion Tween”, ou podemos utilizar a barra de propriedades, clique no inicio de sua animação na Timeline (no caso no quadro 1) e na barra de propriedades na opção Tween coloque “Motion”. Observe na timeline que ele vai gerar uma seta indicando nossa animação e preenche os quadros com uma cor lilás. Ele também apresenta como quadros preenchidos somente o primeiro e o último quadro de sua animação. Clique no último quadro e mude seu símbolo de posição na área de desenho. Se você arrastar o cursor vermelho pela animação você poderá ver como está sua animação. Estando no primeiro quadro e pressionando ENTER ele também apresenta sua animação. Para ver a animação em looping pressione CTRL+ENTER. Para poder andar quadro a quadro de sua animação , você 27 pode pressionar as teclas com sinal de maior (>) e menor (<) no teclado. Onion Skin Quando se cria uma animação muitas vezes temos a necessidade de ficar indo e vindo através dos quadros para termos uma idéia melhor de como está ficando a animação, o que causa uma grande perca de tempo. mas para facilitar todo este processo o FLASH possui um processo chamado Onion Skin. Com ele podemos editar o quadro atual enquanto observamos o quadro que está logo abaixo dele ou até mesmo editar diversos quadros simultaneamente. O quadro atual aparece com as cores normais, enquanto os quadros anteriores aparecem com as cores apagadas, como se estivéssemos sendo vistos através de uma folha de papel vegetal. Somente o quadro atual pode ser modificado, os quadros apagados não podem ser alterados. Para utilizar o efeito basta clicar sobre o botão Papel de Transferência. Os botões são Papel de Transparência, Estruturas Seqüenciais em Papel de Transparência, Editar Vários Quadros e Modificar Marcadores de Transparência. Caso precise mudar a trajetória de sua animação , clique no quadro a ser alterado e arraste seu símbolo de posição. Observe que ele cria um novo quadro chave no quadro onde você modificou a trajetória do símbolo. 30 Um cuidado é sempre certificar-se que a linha guia foi desenhada na camada guia, pois é comum desenhar a linha na camada guiada. Posicione a bola com centro em cima de sua linha, arraste-a no quadro 40 no final de suas linhas e teste o seu filme. Para dar um pouco mais de realismo ao seu movimento envergue as linhas. A linha guia não aparece em seu filme. Podemos fazer com que dois ou mais objetos sigam as linhas guias e podemos também alterar o ponto central de nosso símbolo. Basta dar um duplo clique sobre o mesmo e mudar o símbolo de posição em relação ao ponto central. Dois Objetos na mesma Guia 31 Podemos fazer com dois objetos sigam a mesma guia, podemos até fazer com que dois objetos sigam a mesma guia, alterando o seu centro ou a sua posição na camada. Vamos fazer com que um objeto circulo um texto, simulando uma volta passando pela frente do objeto e depois por trás do mesmo objeto. Primeiro crie o seu texto como exemplo na apostila criamos um texto cromado. Primeiro digite o seu texto (com letra forte e grande). Duplique o seu texto e na cópia coloque cor cinza claro (será à sombra de nosso texto). No texto original desmembre o texto, selecione a ferramenta linha, escolha uma cor de linha branca e divido o seu texto ao meio no sentido horizontal. Selecione a parte superior de seu texto e pinte com um gradiente linear de cima para baixo (Somente na parte selecionada). No exemplo usei de azul escuro para azul claro. Selecione a parte de baixo e pinte de baixo para cima com outro gradiente linear, no exemplo usei de marrom para vermelho. Selecione a ferramenta apagador com a opção somente linhas e apague a linha que usamos para dividir o nosso objeto. Selecione todo o texto e agrupe-o (CTRL+G). Posicione a sombra abaixo de seu texto cromado , use as setas direcionais para posicioná-la melhor em seu texto, selecione ambos e converta-o em símbolo gráfico. Crie um símbolo gráfico em formato de uma esfera com preenchimento gradiente radial e deixe-o armazenado na biblioteca de símbolos. Crie as seguintes camadas, Texto, Bola e uma camada guia acima da bola. a camada da guia faça uma arco oval em volta de seu texto conforme a figura. 32 Na camada da bola arraste o símbolo da bola para a sua camada e posicione o símbolo junta linha guia, conforme já esta na figura acima. Na camada bola crie quadros chaves nos quadros 10,20,25,35,45 e nas camadas texto e guia somente no quadro 45. Crie as interpolações de movimento entre os quadros na camada bola. No quadro 10 posicione a bola um pouco acima na linha guia e duplique o seu tamanho. Nos quadro chaves seguintes posicione a sua circunferência conforme figura abaixo, No quadro 35 ao contrário do que foi feito no quadro 10, diminua a sua bola para a metade de seu tamanho. O próximo passo é fazer com que a bola na volta passe por trás de seu texto, então cria uma nova camada chamada bola2 abaixo da camada texto. 35 Essa camada recuada, é chamada de camada Mascarada (MASKED). Interpolação de Forma A interpolação de forma é uma técnica usada nos efeitos de morfismo que podem ser feitos usando-se transformações de instâncias, como rotação, redimensionamento ou distorção. Preenchimento, contorno, gradientes e alfa são todos atributos que podem ser aplicados na Interpolação de forma. Como exemplo básico inicial, crie um retângulo no palco de seu filme, depois crie um quadro chave no quadro 12 e apague o retângulo e desenhe uma circunferência. Clique no quadro 1 de sua linha do tempo. Na caixa de propriedades abaixo da tela, no campo interpolação onde está “none” escolha “SHAPE”, observe que na linha do tempo ao invés de aparecer uma cor lilás aparece uma core verde- claro, isso identifica uma interpolação de forma. A interpolação de forma ao contrário da Interpolação de movimento, os objetos não devem ser convertidos em símbolos. Imagens vetoriais importadas como, por exemplo, clip-arts em wmf, devem ser desmembrados e imagens bitmaps, devem ser traçadas. Trabalhando com imagens importadas Inicialmente vamos importar duas imagens em wmf (por exemplo, podemos utilizar clip-arts do MS Office se você o tiver instalado em seu computador). No exemplo em questão vamos transformar um símbolo no formato de 36 interrogação em uma lâmpada, este exemplo poderia ser usado em um banner. Coloque a interrogação no quadro 1 e desmembre-a (CTRL+B), crie o quadro chave no quadro 40 e insira a lâmpada, redimensione-a para que fique com as mesmas dimensões da interrogação e desmembre-a também, apague a interrogação deste quadro e crie a interpolação de forma. Para podermos trabalhar como será feita a forma de nossos objetos podemos acrescentar referências entre as formas. Clique no menu Modify, Shape, Add Shape Hint, Vai aparecer em ambas às imagens uma bolinha vermelha com a letra “a”, estas são as referências, você pode arrastá-las para qualquer posição dentro de seu desenho e isto fará com que a sua forma mude a trajetória durante a modificação. Pode-se acrescentar quantas referências de forma forem necessárias. entre um objeto e outro. Uma referência de forma é somente para dois objetos, se, por exemplo, você tem um objeto que se transforma em outro e depois este segundo transforma-se em um terceiro, a referência de forma colocada no primeiro, serve somente para o primeiro e o segundo, para o terceiro é necessário acrescentar do segundo para o terceiro. Quando você pretende aplicar referência de forma em bitmaps, é aconselhável programas externos ao flash como, por exemplo, o Winmorph que permite fazer a mudança de forma entre duas fotos e exportá-la como swf. Mas o próprio flash possui uma possibilidade de se trabalhar com formas, que é a possibilidade de se traçar o bitmap. Após inserir a imagem, Menu Modify, Bitmap, Trace Bitmap. Se a sua imagem for, por exemplo, uma caricatura, você ainda conseguirá bons resultados, mas se for uma fotografia, o resultado poderá ser desastroso. 37 BOTÕES Na verdade, os botões são clipes de filme interativos compostos por quatro quadros. Quando você seleciona o comportamento de botão para um símbolo, o Flash cria uma Linha de Tempo com quatro quadros. Os primeiros três exibem os três estados possíveis do botão, enquanto o quarto defina sua área ativa. Na realidade, a Linha de Tempo não é reproduzida, simplesmente reage ao movimento do ponteiro às ações, passando para o quadro apropriado. Para tornar um botão interativo em um filme, coloque uma instância do símbolo do botão no Palco e atribua ações à instância. Você pode adicionar ações aos botões diretamente no símbolo, ou na linha do tempo , sendo que nesse caso é necessário dar um nome de instância ao símbolo de botão. Cada quadro na Linha de Tempo de um símbolo de botão tem uma função específica: • O primeiro quadro é o estado UP (Para cima), representa o botão que será visível ao abrir o filme do flash. O segundo quadro é o estado OVER (Sobre), representa a aparência do botão quando o ponteiro esta sobre ele. • O terceiro quadro é o estado DOWN (Para baixo), que representa a aparência do botão ao ser clicado. 40 Para adicionar o som ao seu filme após importar ele para dentro do FLASH, arraste ele para o quadro onde ele deverá ser iniciado. Ao adicionar um som a sua linha do tempo, podemos controlar a sua execução pela barra de propriedades. Clique no quadro onde foi inserido o áudio. Observe que ele mostrará o arquivo de áudio que está sendo carregado, caso tenha mais de um arquivo de áudio em sua biblioteca você poderá alterar o arquivo por essa opção. Podemos também aplicar efeitos em nosso som • A opção None não aplica quaisquer efeitos ao arquivo de som. Escolha essa opção para remover os efeitos aplicados anteriormente. • A opção Left Channel/Right Channel reproduz o som somente no canal esquerdo ou direito. • A opção Fade Left to Right/Fade Right to Left desloca o som do canal esquerdo para o direito e do direito para o esquerdo. • A opção Fade-in aumenta gradualmente a amplitude de um som pela sua duração. • A opção Fade-out diminui gradualmente a amplitude de um som pela sua duração. • A opção Custom permite que você crie seus próprios pontos de entrada e de saída do som usando Editar Envelope. 41 Escolha uma opção de sincronização no menu pop-up Sinc: • A opção Event sincroniza o som com a ocorrência de um evento. Um evento de som é reproduzido totalmente quando o respectivo quadro-chave inicial é exibido pela primeira vez, independentemente da Linha de Tempo, mesmo se o filme parar. Os sons de evento são misturados quando você reproduz o filme publicado.Um exemplo de evento de som é um som reproduzido quando um usuário clica em um botão. • A opção Start é idêntica à Event, exceto pelo fato de que, se o som já estiver em reprodução, será iniciada uma nova instância desse som. • A opção Stop silencia o som especificado. A opção Stream sincroniza o som , ao se importar um vídeo e precisar incluir a trilha sonora, deixar essa opção marcada. Embora se torne fácil conseguir sons na Internet e em CDS multimídia hoje em dia, muitas vezes você precisará editar o seu próprio som, por exemplo, uma frase, a ser dita ao clicar sobre um botão, ou uma parte de uma música para introdução de seu site, é aconselhável para isso o uso de programas externos como, por exemplo, o SoundForge, que permite trabalhar com praticamente todos os formatos de sons e recortar músicas para o seu projeto, ele também possui efeitos diferenciados para o som, deixando para o Flash o som já pronto para ser utilizado. 42 VÍDEOS Entre os diversos formatos populares para vídeo digital que o Flash importa estão o QuickTime, MPEG, AVI e DV. Além de importar é possível adicionar interatividade, animações e figuras do Flash e em alguns casos é possível aplicar interpolações de movimento. Para importar um vídeo, Menu File Import, Import Vídeo e vai aparecer uma cx de diálogo, onde você deve selecionar o seu filme. Caso o seu filme venha a ser “puxado” de um servidor de Streaming Flash é necessário marcar a segunda opção e direcionar o caminho do servidor. Na segunda etapa é necessário que você defina como você quer importar seu vídeo para o flash. • Progressive download from a web Server: ele vai converter seu vídeo para o formato FLV e vai gerar uma tela de apresentação do vídeo. Ao 45 Para poder ver o seu filme, é necessário testar seu filme . Menu Control Test Movie (CTRL+ENTER). O processo de importação “EMBED” (quarta opção dos modos de importação) que deve ser usado quando o vídeo necessitar interação (aconselhável importar em um Clipe de Filme), vai gerar uma linha do tempo para o filme. O cuidado nesse tipo de importação é com o tamanho do filme. 46 AÇÕES Ações são scripts utilizados pelo FLASH para dar mais interatividade aos filmes e um melhor controle sobre os mesmos, a linguagem de scripts do FLASH é conhecida ActionScript, quem já estiver familiarizado com linguagens de programação se sentirá bem à vontade com esta linguagem que como o C++, o JavaScript é Orientada a Objetos. Mas quem não é programador não precisa se preocupar, pois em nosso curso vamos estudar apenas as ações básicas, já que um estudo mais profundo da linguagem exigira conhecimento de lógica de programação. O painel Ações Menu Window, Actions (F9) Para se trabalhar com o painel de ações podemos trabalhar com o modo de Script Assistance ligado , que facilita a colocação das ações onde o Flash nos mostra as ações definidas por grupos. Ou com o mesmo desligado onde você deve digitar todo o seu código, é importante lembrar que a ActionScript faz diferenciação entre maiúsculas e minúsculas. As ações podem ser aplicadas a símbolos ou diretamente na linha do tempo. Quando se aplica ações a símbolos é necessário definir qual será o evento no símbolo que vai chamar a ação. A linguagem Actionscript possui algumas versões: A versão 1: Contem as ações mais comuns a animações flash como comando para parar, ir para determinado quadro, abrir uma URL ou arquivo, etc..., essa versão era a padrão até a versão MX. Em nossa apostila vamos utilizar 47 algumas das ações de actionscript1. A versão 2: Possui elementos de programação avançado como utilização de classes. A utilização dessa versão de actionscript iniciou-se na versão MX 2004 A versão 3: trará novos elementos ao Flash, atualmente ela é utilizada pelo Adobe FLEX. Para entendermos melhor o uso de nossas ações, crie um símbolo de botão no quadro 1 da camada 1. Crie uma nova camada e a partir do quadro 2 (clique no quadro 2 com o botão direito e escolha “Insert Keyframe”) dessa camada crie uma animação. 50 A segunda linha nos mostra que ele vai direcionar para o quadro 2 e executa a linha do tempo. Ao clica sobre a segunda linha ele muda as propriedades do painel de ações, ele mostra as opções Go to and play e Go to and stop, qual a cena para a ação. Current Scene , corresponde a cena atual. A opção Type, permite definir um quadro pelo número, pelo nome, avançar um frame, ou retornar um frame. A opção Frame,é onde deve-se colocar o quadro de destino. Ao testar seu filme e clicar no botão você pode observar que ele executa a animação e volta ao inicio do filme. Acrescente uma ação STOP ao final de seu filme. Para isso clique no último quadro da camada ações de seu filme com o botão direito do mouse e escolha “Insert Keyframe”, depois no painel de ações acrescente uma ação stop nesse quadro. Vamos agora acrescentar o nosso filme a ação para que ao finalizar a animação ele abra uma URL ou arquivo. Continue com o ultimo quadro da camada de ações selecionado, no painel de 51 ações clique na pasta Browser / Network e dê um duplo clique na ação getURL. Clique sobre a ação getURL e nas opções defina no campo URL o que deve ser aberto (no caso usamos http://www.adobe.com.br), toda URL a ser aberta necessita que seja colocado o http. No campo window, deve ser preenchido o tipo de janela, se for deixado em branco abre o endereço na mesma janela. Relembrando alguns itens importantes: Ações a serem realizadas para todos os elementos do filme devem ser colocadas em quadros na linha do tempo. Ações a serem aplicadas em botões deve-se primeiro selecionar o objeto e somente depois aplicar as ações. PRE-CARREGADORES Todo o cuidado que você investe na criação de interatividade complexa com várias linhas de Tempo será desperdiçado caso o seu usuário tenha que esperar muito tempo para que seja feito o download da animação através da WEB, muitas vezes fazendo com que o usuário desista de abrir a página. Podemos evitar a perca de usuários criando animações curtas que os entretenha e dispare o filme principal somente quando o filme tiver sido carregado. Os pré-carregadores deverão ser pequenos já que você quer que eles sejam carregados quase que instantaneamente e devem ser informativo, deixando seus espectadores cientes do que os espera ou de quanto tempo eles terão de aguardar. 52 Criando um carregador simples Vamos criar um carregador simples. O primeiro quadro deve ser destinado a animação do preloader. Crie um clipe de filme que deve conter a sua animação do preloader, lembrando que essa animação deve ser leve. Crie duas camadas em seu filme, uma para ações e outra para o filme. No painel de ações desligue a opção script assistance e coloque a seguinte ação: if (_framesloaded>=_totalframes) { gotoAndPlay (2); } else { gotoAndPlay (1); } Explicando a ação: if (_framesloaded>=_totalframes) { Verifica se os quadros carregados de seu filme é maior ou igual ao total de quadros de seu filme. gotoAndPlay (2); Caso a ação acima seja real ele direciona para o quadro 2 onde temos nossa animação. 55 CENAS Podem ser entendidas como partes de uma animação. Cada cena pode conter seus próprios objetos/ personagens, e automaticamente se colocam em ordem uma após outras, podem também ser chamadas através de botões ou através de ações colocadas diretamente nos quadros. Depois de criada a cena podemos nomear as cenas de forma que ela possa identificar sua função dentro da animação. Para criar uma nova cena clique no Menu Insert Scene, e para alterar o nome de uma cena Menu Modify, Scene. Para um entendimento maior das cenas será necessário trabalhar também com ações. Atualmente o uso das cenas tem sido mais restritos a animações Flash para multimídias em CDs, HD, etc..., para swfs a serem apresentados na WEB, elas vão consumir muito espaço, então ela tem sido substituída por ações de carregamentos de filme, por este motivo não será dada uma ênfase maior sobre este elemento do Flash. PUBLICAÇÃO DO FILME A publicação é resultado final de seu trabalho no Flash , para publicar o seu trabalho, basta apenas clicar no Menu File, Publish. O resultado será um documento HTML com o código de inserção do para o arquivo swf do Flash. Para podermos definir quais as propriedades de nossa publicação, clique no Menu File, Publish Settings. 56 A primeira guia trás a possibilidade dos formatos a serem definido como projeto final de seu trabalho: Flash (swf) Este é o formato do arquivo de filme como resultado final; HTML: Gera o documento HTML de seu filme ; GIF: este formato permite gerar de seu filme gifs estáticos e gifs animados do mesmo, sendo que quando estáticos podemos definir qual será o looping e a qualidade final. JPG: Permite que seja gerado de sua animação uma imagem em JPG, e qualidade de exportação. PNG: Permite exportar o filme neste formato que embora seja menos utilizado pode ser utilizado para imagens em seu código HTML , é o formato padrão do Fireworks. Windows Projector: Aqui podemos gerar um arquivo executável de seu filme o que dispensa a necessidade de plug-ins e do Flash para se visualizar a animação , este projetor somente para Windows. 57 Macintosh Projector: Funciona da mesma maneira que para o Windows , só que para a plataforma MAC. Quick Time: Permite gerar de sua animação um filme no formato .mov. A guia Flash permite definir a versão do Flash Player para seu filme, ordem de carregamento do filme, versão de actionScript. Em options podemos, gerar um relatório do filme, proteger contra importação (Quando essa opção está desmarcada é possível importar um SWF dentro de outro filme), omitir ações de rastreamento, permitir debug dos códigos do filme, comprimir o filme, proteger seu filme com senha, definir a qualidade do JPEG e qualidade do áudio. A terceira guia HTML, permite definir para qual saída Flash será o filme, permite detectar a versão do Flash. Dimensões do filme, definir a exibição filme (playback), qualidade do filme, modo de janela (Window mode), alinhamento, escala do swf no HTML.
Docsity logo



Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved