Apostila de flash, Notas de estudo de Engenharia Elétrica

Baixe Apostila de flash e outras Notas de estudo em PDF para Engenharia Elétrica, somente na Docsity! Adobe Flash CS4 1 FLASH CS4 Autor: Marcos Paulo furlan Apostila vencedora do 3º. Concurso de Apostilas do Apostilando.com Adobe Flash CS4 2 ÍNDICE ÍNDICE .......................................................................................................................................... 2 INTRODUÇÃO .............................................................................................................................. 4 O que é Shockwave Flash.............................................................................. 4 O AMBIENTE DO FLASH............................................................................... 5 Preferências.................................................................................................... 6 Atalhos ........................................................................................................ 7 Tela de Abertura ............................................................................................. 8 Configurando sua área de trabalho ................................................................ 9 Barra de ferramentas.................................................................................... 11 Caixa de Ferramentas .................................................................................. 11 Ferramentas de Desenho e suas propriedades............................................ 11 Manipulando Objetos.................................................................................... 26 Trabalhando com objetos externos............................................................... 28 Importando bitmaps .................................................................................. 28 Importando arquivos em PSD ................................................................... 30 Importando arquivos do Illustrator............................................................. 31 Importando um arquivo de áudio............................................................... 32 Importando vídeos .................................................................................... 35 SÍMBOLOS ................................................................................................................................. 39 Os tipos de Símbolos:................................................................................... 40 Filtros ........................................................................................................ 42 LINHA DO TEMPO ..................................................................................................................... 43 ANIMAÇÃO................................................................................................................................. 45 Animação Quadro a Quadro......................................................................... 45 Animação com Interpolação de Movimento.................................................. 46 Motion Editor................................................................................................. 49 Onion Skin .................................................................................................... 49 Propriedades da barra de ferramentas do quadro ........................................ 51 Suavização da animação. ......................................................................... 52 CAMADAS .................................................................................................................................. 53 Camadas Guia.............................................................................................. 55 Exemplo .................................................................................................... 57 Máscaras ...................................................................................................... 59 Interpolação de Forma.................................................................................. 61 Trabalhando com imagens importadas ..................................................... 62 Shape Hints............................................................................................... 63 Trace Bitmap............................................................................................. 64 BOTÕES ..................................................................................................................................... 65 Biblioteca de Botões ................................................................................. 66 CLIPES DE FILME...................................................................................................................... 67 Adobe Flash CS4 5 O AMBIENTE DO FLASH Ao iniciarmos o Flash ele vai apresentar uma tela com as opções que podemos trabalhar com o Flash. Para quem já utiliza ou utilizou alguma versão anterior do Flash a primeira mudança que pode ser observada é de distribuição de sua “Workspace”. A Timeline (linha do tempo), agora está embaixo – como à maioria dos programas de animação – a janela central mostra-se um menu inicial, na direita temos algumas paletas como Properties e Library e a caixa de ferramentas. É possível mudar a Workspace, para isso basta clicar no menu Window, Workspace e escolher uma das opções que o Flash disponibiliza. Adobe Flash CS4 6 Você pode também modificar sua workspace, e salvá-la. Basta definir a posição de suas paletas, Timeline, etc... E depois clicar no menu Window, Workspace, New Workspace. Preferências Você pode também definir alterações na exibição de componentes dentro do Flash, clique no menu, Edit>Preferences (CTRL+U). Na primeira opção “General” podemos alterar as configurações gerais do Adobe Flash CS4 7 programa como ao carregar (on Lauch) o que deve ser mostrado – o padrão é a tela de boas vindas. Quantidade de opções de desfazer, cores de elementos visíveis, etc... Podemos definir também as preferências relativas à linguagem ActionScript, auto formatação. opções de objetos a serem colados no Flash, como se comportar com as ferramentas de desenho, preferências de texto, avisos e importação de PSD e AI para dentro do Flash. Atalhos O Flash também disponibiliza um grande quantidade de atalhos para facilitar a sua utilização, a grande maioria segue os padrões dos programas gráficos como CRTL+S para salvar, CTRL+A para selecionar todos os objetos. Os principais atalhos você pode observar ao selecionar um item de menu. Na barra de ferramentas lateral ao posicionar o mouse sobre uma ferramenta ele mostra o nome e entre parênteses a letra correspondente ao atalho dela. Para saber sobre todos os atalhos do Flash, clique no menu Edit> Keyboard Shortcuts. Nessa tela também é possível adicionar novos atalhos ao programa. Adobe Flash CS4 10 Observe que seu filme tem uma taxa de quadros de 24 fps (frames per second – frames por segundo) e uma dimensão de 550x400px e fundo de tela branco. A taxa de quadros de um filme é de extrema importância, até a versão anterior o Flash trazia como padrão uma taxa de quadros de 12fps, a mudança para 24fpf melhora a visualização de sua animação, mas deixa o filme mais pesado em sua exibição. Um filme com taxa de quadros de 24 fps significa que para que sua animação tenha algum movimento de um segundo ela vai precisa se deslocar 24 quadros em sua Timeline. Se sua animação será criada para rodar em um DVD ou TV você precisa criar a sua animação em 30fps. Você pode alterar todas as propriedades clicando no botão Edit. Você pode chamar essa tela também através do clique com o botão direito e Adobe Flash CS4 11 depois a opção “Document Properties”. 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. Caixa de Ferramentas A caixa de Ferramentas do Flash CS4 é composta 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. 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. Tecla de atalho “V”. Ao selecionar um objeto e clicar na aba Properties, você poderá alterar as propriedades do objeto selecionado. Adobe Flash CS4 12 Podemos definir a sua posição X e Y no palco, definir suas dimensões (w – largura e h – altura), se você precisar que dimensionamento seja uniforme é necessário clicar no ela de corrente para fechá-lo. Na opção Fill (preenchimento) e stroke (contorno), você pode alterar as propriedades de cores e no caso do contorno a espessura do contorno, o tipo da linha e como são cantos abertos (cap) quando os objetos não forem forma fechadas e fechados (join) que permite arredondar e cortar o contorno. Adobe Flash CS4 15 Você pode observar que ao criar os pontos ele gera alças que poderão depois com ferramenta subselecionar (seta branca) serem trabalhados acentuando as curvas conforme a sua necessidade. Caso seja necessário criar algum ponto novo, você pode usar a ferramenta Add Anchor Point Tool que faz parte do grupo da ferramenta caneta. Ao selecionar essa ferramenta você poderá observar que o cursor fica no formato da caneta com um sinal de mais (+) permitindo criar o novo ponto. Para retirar um ponto basta selecionar a ferramenta Delete Anchor Point Tool. Com a ferramenta Convert Anchor Point você poderá também trabalhar diretamente nos pontos. A ferramenta Texto possui três opções. que podem ser Estático, Dinâmico e de Entrada. Essas opções podem ser modificadas pelo painel Properties Adobe Flash CS4 16 Texto Estático: É o texto normal. Utilizamos esse tipo de texto no Flash para frases e blocos de texto. Para se criar um bloco basta clicar e manter o mouse pressionado para definir o tamanho de sua caixa de texto. Ele permite formatação de caractere e parágrafo, opções de aplicação de link direto nele e filtros (veremos posteriormente junto com símbolos). 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. 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. Grupo de ferramentas de desenho, a primeira ferramenta é o retângulo . Para se desenhar com o retângulo o processo é simples, clica-se na ferramenta e com o mouse pressionado arraste-se o mesmo pela tela. Enquanto se desenha no canto inferior direito aparece uma pequena bolinha, quando o retângulo fica uniforme como um quadrado a bolinha fica mais forte, isso facilita muito para se criar objetos perfeitos, outra forma de se criar se criar um quadrado é Adobe Flash CS4 17 pressionar a tecla SHIFT enquanto se desenha. Para desenhar seu retângulo com cantos arredondados externos e internos, ao selecionar a ferramenta retângulo, você chama o painel Properties, nele você pode alterar tanto cor de contorno e preenchimento como definir o arredondamento dos cantos. Quando precisar desenhar um retângulo com cantos arredondados e não souber seu ângulo desenhe seu retângulo e sem soltar o mouse vá arredondando seus cantos com as setas direcionais. A ferramenta Elipse permite desenhar circunferências, ovais, e a partir da versão CS4 podemos também ângulos de inicio, fim e alterar o raio interno. Adobe Flash CS4 20 de opções abre-se às possibilidades de preenchimento, tipos de pinceis e diâmetros de pinceis. As opções dessa ferramenta são: • Paint Normal: Pinta o objeto por onde o pincel for passado; • Paint Fills: Pinta somente preenchimentos; • Paint Behind: Pinta somente fora do objeto; • Paint Selection: Pinta somente o que está selecionado; • Paint Inside: Permite pintar somente dentro. Abaixo dessas opções temos o tamanho do pincel e abaixo dele a forma do pincel. Para quem utiliza uma Tablet ao selecionar a ferramenta pincel ele habilita mais uma opção que é a configuração de pressão do pincel. NOVIDADE
Uma das grandes novidades da versão CS4 é a ferramenta Deco Tool . Essa ferramenta funciona como um spray dentro do Flash, Ao selecionar essa ferramenta a janela Properties permite uma série de configurações. Como essa é uma ferramenta que permite a utilização de símbolos com pincel espalhador, não vamos nos aprofundar nela no momento. Mas na janela de propriedades temos o efeito de desenho (Drawing Effect), abaixo temos as opções de utilizar ou não símbolos – como está marcada a opção Default Shape o botão Edit esta desabilitado – podemos mudar as cores do efeito Nas opções avançadas podemos mudar o ângulo e o escalamento do padrão de preenchimento. Podemos também definir se o efeito será estático ou podemos animar o padrão. Adobe Flash CS4 21 Vamos a um exemplo básico. Em um documento em branco do Flash, chame a ferramenta Deco Tool. Na janela de propriedades definas as propriedades do spray, mude as cores. Mude algumas configurações. Marque a opção Animate pattern e defina como frame step em 6. Depois clique no meio de sua área de desenho. Observe que na Timeline ele criou todos os quadros necessários para que o preenchimento fique animado. Adobe Flash CS4 22 NOVIDADE
Mais uma grande novidade da versão CS4 a ferramenta Boné Tool e a ferramenta Blind Tool , como são duas ferramentas que para serem utilizadas precisa-se entender sobre símbolos e animação, veremos seu funcionamento posteriormente. A próxima ferramenta trata de preenchimentos e contornos. 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. Ao clicar na cor atual ele abre a opção de escolha de cores. Para trabalharmos com cores gradientes, nível de alpha da cor é necessário clicar no menu Window>Color Adobe Flash CS4 25 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 apagador funciona como uma borracha, o cuidado é como apagar é necessário utilizar as opções desta ferramenta. Ao selecionar essa ferramenta ele abre algumas opções de utilização. A primeira opção permite que se escolha o que deve ser apagado. Erase Normal
Apaga como um borracha mesmo, onde for passado o cursor ele apaga. Erase Fills
Apaga somente preenchimentos. Erase Lines
Apaga apenas linhas. Erase Selected Fills
Apaga somente preenchimentos selecionados. Erase Inside
Apaga somente de dentro para fora do objeto selecionado. A opção Faucet (ícone em forma de uma torneira) apaga todo o objeto que esteja com as mesmas propriedades. A última opção permite modificar o formato da borracha. A ferramenta Hand permite “arrastar” a tela. A tecla de atalho é o H, mas você pode utilizar ela sem mudar de ferramenta pressionando a barra de espaços. A ferramenta lupa permite aumentar e diminuir o Zoom de área de desenho. Ao selecionar essa ferramenta ela habilita as duas opções. As teclas de atalho para ela são CTRL+”+” no teclado de caracteres e CTRL+”-“, também Adobe Flash CS4 26 no teclado de caracteres. Um dica muito útil é através da personalização de atalhos, definir também o sinal de “+” e ”-“, junto com CTRL no teclado numérico. A personalização de teclas de atalho já foi vista no inicio dessa apostila. A ultima opção permite alternar entre as cores de preenchimento e contorno e definir as cores padrão. 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, mas se aproximarmos o cursor da linha o mesmo se transformará em uma curva, ao pressionarmos o botão do mouse e arrastarmos transformaremos nossa linha em uma curva, o mesmo vale para todos os objetos. Em retângulos ao aproximarmos de suas extremidades ele também apresentará um vértice permitindo que se crie pontas. Ao manipular textos é necessário um processo um pouco mais detalhado, os textos não são criados como vetores, e para que se possam alterar as formas dos textos é necessário primeiro transformá-los em vetores. Após criar o seu texto, basta selecioná-lo com a ferramenta seta e desmembrá-lo (Menu Modificar, Desmembrar ou CTRL+B). A primeira vez que se desmembrar um Adobe Flash CS4 27 texto ele vai quebrar em letras, retira o processo de desmembrar para ele se transformar em Vetor. Ao desmembrar o texto apenas uma vez, ele quebra em letras, para colocar cada letra em uma layer separada, com todas as letras selecionadas, clique com o botão direto sobre uma delas e escolha “Dstribute to Layers”. Essa dica não é valida somente para textos, basta apenas ter dois ou mais elementos em seu palco selecionados para que isso possa ser utilizado. O seu texto passou a ser um vetor então podemos acrescentar gradientes, e alterar a sua forma. Importante: Depois de convertido em vetor não é mais possível alterá-lo como texto. No logotipo acima além de aplicarmos cores de preenchimento gradiente em um texto desmembrado, também utilizamos a opção de agrupar (Menu Modificar) e de Ordem, (Menu Modificar). Outra opção de manipulação muito importante é a manipulação de alinhamento de objetos (Menu Window, Align ou Menu Modify Align), pois quando iniciarmos o nosso trabalho com animações existe um cuidado muito grande com posição de nossos objetos. Adobe Flash CS4 30 Importando arquivos em PSD Uma das grandes novidades que veio com a versão anterior CS3 e que facilitou muito a criação de sites e peças totalmente em Flash. Ao importar um PSD ele permite que você possa importar o PSD de forma chapada, ou com mesmas estrutura de Layers do original. Permite também que se importe as layers, já sendo convertidas para símbolos do Flash. A opção “Set stage size to same size as Photoshop canvas” permite que se dimensione o palco do Flash pelo tamanho de seu PSD. Adobe Flash CS4 31 É possível observar pela imagem que ao importar ele criar uma pasta com o nome de group e adiciona cada layer do PSD dentro de uma layer do Flash. Uma única ressalva sobre a importação de PSD é quando dentro dele você criou elementos de sombra, brilho, enevoamento, transparências que sobreponham às imagens, pois ele importa como se a imagem de baixo fizesse parte da layer. Nesses casos, é aconselhável que pelo Photoshop você oculte as layers debaixo da imagem desejada e exporte-a como um PNG transparente e depois importe esse PNG no Flash. Importando arquivos do Illustrator O processo de importação de imagens em formato AI (Adobe Illustrator) é muito semelhante à importação do PSD. Ele vai mostrar as layers dentro do arquivo Ai e vai permitir que você possa transformar as layers em símbolos e dar nome a elas. Como no illustrator podemos também criar símbolos, ele da à opção de importar símbolos não usados no AI. Ao importar um arquivo do AI, ele vem para o Flash como um vetor, mas caso queira você pode transformar ele em um bitmap para a importação. Adobe Flash CS4 32 Importando um arquivo de áudio No Flash, é possível utilizar os sons de várias maneiras. Você pode criar sons reproduzidos continuamente, independentemente da Linha de Tempo, ou pode sincronizar a animação com uma trilha sonora. Você pode anexar sons a botões para torná-los mais interativos e fazê-los aumentar e diminuir para obter uma trilha sonora apurada. É possível usar sons em bibliotecas compartilhadas para vincular um som de uma biblioteca a vários filmes. Também é possível usar sons em objetos de som para controlar sua reprodução com o ActionScript. O Flash armazena os sons na Biblioteca juntamente com os bitmaps e símbolos. Como nos símbolos, basta uma cópia de um arquivo de som para utilizá-lo de várias maneiras no filme. 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. Adobe Flash CS4 35 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, deixando para o Flash o som já pronto para ser utilizado. Importando 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. Porém para poder exibir um vídeo dentro do padrão de Flash Vídeo será necessário converter ele para FLV Para importar um vídeo, Menu File Import, Import Vídeo e vai aparecer uma caixa 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. Como nosso filme é um vídeo no formato MOV, clique no botão “Launch Adobe Adobe Flash CS4 36 Media Encoder”. Se precisar cortar, definir qualidade, etc... em seu vídeo clique flecha de Preset, ele te mostra uma série de opções predefinidas e também uma opção “Edit Export Settings”, onde você poderá definir como quer seu vídeo. Adobe Flash CS4 37 Clique em Ok e depois em Start Queue. Será feita a conversão do filme para o formato FLV. Volte à tela de importação do vídeo e mude para importar o FLV Não vamos alterar nenhuma propriedade e clique em NEXT. Defina agora o SKIN (pele) que deseja para ser o player de seu filme. Adobe Flash CS4 40 Os tipos de Símbolos: Gráfico: Este é o tipo mais básico de símbolo, pois ele é praticamente estático, 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 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. 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 Adobe Flash CS4 41 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. NOVIDADE
A opção 3D Position and View é um recurso que veio com a versão CS4, e permite você trabalhar os eixos X, Y e Z do objeto. Permite trabalhar o ângulo de perspectiva. A opção Color Effect permite modificar as propriedades de cor e transparência Adobe Flash CS4 42 do símbolo. As opção são: • Brightness
Brilho, o brilho natural do objeto é 0%, ao colocar em - 100% ele retira todo o brilho (preto) e 100% ele adiciona todo o brilho (100%). • Tint
Preenchimento, permite preencher o seu objeto com qualquer cor com grau de transparência. • Alpha
Permite acrescentar transparência aos símbolos. • Advanced
Permite trabalhar as cores RGBA do símbolo. A opção Display Blending permite aplicar mistura de objetos. É necessário que cada objeto esteja em sua camada. Use Runtime Bitmap Caching, permite criar um bitmap de seu objeto em tempo de execução. Filtros A partir da versão 8, o Flash trouxe uma inovação esperada há muito tempo que são filtros para serem aplicados aos símbolos. Uma única observação, os filtros só podem ser aplicados a Clipes de Filme e Textos. Para aplicar um filtro, selecione seu símbolo e clique no botão Add Filter. As opções são: • Drop Shadow
Aplica uma sombra ao seu objeto. Permite alterar diversas propriedades do efeito como desfoque, cor, qualidade, etc... Adobe Flash CS4 45 Caso você venha a produzir um filme em flash para ser exibido em um DVD, TV ou para ser introduzido em algum filme. Será necessário mudar a sua velocidade para 30FPS. Animações que contenham muito brilho, ou efeitos de com objetos piscando é aconselhável utilizar 24FPS. 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. Adobe Flash CS4 46 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 seja necessário que as 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 Classic Tween”. Adobe Flash CS4 47 Observe na timeline que ele 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ê pode pressionar as teclas com sinal de maior (>) e menor (<) no teclado. NOVIDADE
Na verão CS4 podemos criar também nossas animações de outra forma. Ela permite um maior controle sobre a sua animação, por isso ao lado de Timeline, temos a opção “Motion Editor”. Vamos a um exemplo Crie uma forma ou importe algo e converte em Movie Clip. Adobe Flash CS4 50 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. Adobe Flash CS4 51 Visão Outlines Propriedades da barra de ferramentas do quadro Ao selecionar um quadro chave, podemos definir suas propriedades pela barra de ferramentas. A barra de ferramentas de quadro mostra alguns conteúdos diferentes de acordo com o tipo de Tween que utilizamos. Adobe Flash CS4 52 Quando o Tween é através Motion, ele trabalha as propriedades da animação. Quando é Classic ele trabalha as propriedades do Frame. Suavização da animação. Podemos trabalhar a suavização de nossa animação. Ao utilizarmos Animação do tipo Motion, isso deve ser feito através da aba Motion Editor. Adobe Flash CS4 55 Observe acima que na animação temos duas circunferências e a vermelha aparece sobre a verde devido à ordem de empilhamento. Camadas Guia Um dos grandes atrativos da animação com Interpolação é possibilidade de criar caminhos para a animação do objeto este processo é chamado Linha Guia. Para especificar este caminho existem dois cuidados importantes, quando você cria um símbolo você pode observar que na parte central do símbolo aparece um sinal de mais (+) este sinal deve coincidir com a linha guia. O segundo cuidado é que a linha deverá ser criada na camada da linha guia para não ocorrer defeitos na animação. Para criar uma camada guia proceda da seguinte forma. Crie seu símbolo que deverá seguir a guia Adobe Flash CS4 56 Renomeie a camada caso queira. E crie uma nova, ela automaticamente ficará acima. Clique na camada de cima com o botão direito e escolha Properties Essa janela mostra as propriedades da camada, através dela vamos criar mascarás, podemos definir uma cor diferente para o outline das camadas, podemos bloquear a camada e em nosso caso vamos marcar a opção Guide. Observe que o ícone da guia teve uma mudança, com isso definimos que ela é uma guia, precisamos agora definir que a camada de baixo será uma camada guiada. Adobe Flash CS4 57 Arraste a camada de baixo para cima da camada guia puxando um pouco para a direita e observe que vai aparecer uma “barrinha com uma bolinha na ponta”, pode soltar o mouse Observe que agora o ícone da camada guia também mudou de forma. Clique agora no primeiro frame da camada guia e com o lápis ou com a ferramenta linha crie a sua guia. Depois crie sua animação tipo Classic Tween. Na camada guia apena preencha os frames (F5), não é necessário criar quadros chaves. Reforçando o que foi dito anteriormente é necessário que os centros de seu objeto estejam em cima da linha guia nos quadros chaves de sua animação para que ele possa seguir a linha. Acima observe a posição do símbolo no primeiro e no último quadro chave. Exemplo Vamos criar uma animação que fará o desenho de uma bola "quicando" no filme. Primeiro, crie um símbolo no formato de uma circunferência e crie uma interpolação até o quadro 40. Crie a sua camada guia seguindo os passos descritos acima, depois clique no Adobe Flash CS4 60 Observe que ele deixa visível somente onde os objetos se interceptam. Veja abaixo a área de edição natural e depois com a máscara aplicada. Adobe Flash CS4 61 Ao aplicar a máscara as suas camadas são bloqueadas e a camada de baixo faz um recuo. Essa camada recuada é chamada de camada Mascarada (MASKED). Caso você precise alterar algo em sua máscara, ou no objeto que está mascarando, é necessário desbloquear a máscara, clicando no ícone em forma de cadeado. Caso você queira voltar às camadas ao estado normal, é necessário clicar como botão direito do mouse na camada e escolher a opção Properties 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 24 e apague o retângulo e desenhe uma circunferência. Adobe Flash CS4 62 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). Ou desenhos vetoriais do Adobe Illustrator. Ambas as imagens acima foram arquivos AI (Adobe Illustrator) importadas. Ao importar imagens do AI elas são incorporadas ao Flash de forma agrupada, então é necessário quebrar a imagem uma vez (CTRL+B) para que ela fique desagrupada e depois quebrar ela novamente para que ela fique como um Adobe Flash CS4 65 Se a sua imagem for, por exemplo, uma caricatura, você ainda conseguirá bons resultados, mas se for uma fotografia deve-se ter muito cuidado. 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: Adobe Flash CS4 66 • 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. • O quarto quadro é o estado HIT (Área), que defina a área que responderá ao clique com o mouse. Essa área é invisível no filme. Ao transformar um texto em botão essa área devera sempre ser preenchida com um objeto como, por exemplo, um retângulo cobrindo o texto para que todo o texto fique clicável. Biblioteca de Botões Você pode utilizar qualquer elemento do Flash como um botão, podemos acrescentar botões estáticos, com clipes de filmes como elementos dos botões, podemos acrescentar áudio ao botão, etc... Mas o Flash também tem uma série de botões pré-personalizados que podem ser utilizados como botões. Para ter acesso a eles, clique no Menu Window, Common Library, Buttons Ao arrastar um botão como o da imagem “árcade Button-blue”, para o palco ele Adobe Flash CS4 67 apresenta a forma demonstrada. Dê um duplo clique nele para podermos ver a forma de como oi criado Observe que dentro do botão foram criadas várias camadas para que ele ficasse com a aparência atual. Até a versão MX do Flash algumas ações somente eram permitidas serem colocadas em botões, mas a partir da versão MX 2004 as ações podem ser adicionadas a Clipes de Filmes. Atualmente é aconselhável utilizarmos Clipes de Filme CLIPES DE FILME Clipes de Filme mais conhecidos como Movie Clips ou somente MC são pequenos trechos de animação que funcionam independentes da linha do tempo do filme principal. Podem conter sons, controles interativos, instâncias de outros MCS. Podem ser controlados através de botões, por ações de quadros, ou por outros MCS, podem ainda ser utilizados na criação de botões animados. Uma das grandes vantagens dos MCS é você pode editá-los separadamente do filme principal, facilitando a organização da animação, além de que o MC é carregado por completo no filme. Atualmente embora o Flash possa criar símbolos do tipo gráfico, botões e clipes de filme, os clipes de filme estão substituindo os demais símbolos em sua utilização. Como criar um clipe de filme. Desenhe um círculo. Imaginemos que esse circulo venha a ser à roda de um veículo. Podemos conforme o veiculo se movimentar com a roda gire. Imagine Adobe Flash CS4 70 CINEMÁTICA INVERSA Com toda a certeza uma das ferramentas mais esperadas nessa nova versão do Flash foi à ferramenta de Bones . Ela permite se possa criar um “esqueleto” em seu objeto para que se possa animar seu objeto de forma independente. Essa é uma ferramenta muito comum em softwares de animação tridimensional. Para as versões anteriores do Flash existia um PLUG-IN que permitia essa conexão. Para vermos o funcionamento da ferramenta, desenhe um importe um objeto para dentro do Flash. Se o objeto a ser importado for muito complexo, não será possível criar a cinemática inversa. Crie então seu desenho Adobe Flash CS4 71 Selecione a ferramenta Bone Tool e clique onde será criado o primeiro eixo de seu “esqueleto”. Repita o processo para criar as outras partes o esqueleto de seu desenho. Adobe Flash CS4 72 Crie seu quadro chave mais a frente e pelos nós de sua armadura mude a forma de seu desenho, a animação será criada automaticamente. Ao criar sua cinemática inversa, o Flash vai criar uma camada chamada “armature”, ao clicar no quadro chave dessa layer abre-se as propriedades dessa layer. Adobe Flash CS4 75 Para que você possa aplicar o efeito em seu objeto, basta apenas desenhar seu objeto ou importá-lo, escolher o efeito na janela de efeitos e clicar em Apply. Automaticamente serão criados os quadros chaves de sua animação. Spray Brush Tool A ferramenta Spray Brush Tool funciona de forma semelhante à ferramenta Deco Tool, mas ao invés de ser utilizada como um lápis ela permite que se espalhe um pincel em sua tela. A ferramenta está no mesmo grupo da ferramenta Brush. Vamos a um exemplo de utilização da ferramenta Crie um movie clip qualquer, no caso foi criado um estrela com uma animação de Classic Tween. Adobe Flash CS4 76 Volte à cena principal e clique na ferramenta Spray Brush Tool . Na aba de propriedades podemos definir qual será o símbolo a ser utilizado como spray clicando no botão Edit Adobe Flash CS4 77 Você pode também a largura e altura de seu pince em “Scale width” e “Scale heigth”. Você pode também escalar e rotacionar de forma randômica se u brush. Após definir a forma de seu Brush, basta apenas espalhar o spray em sua tela. Adobe Flash CS4 80 você não o tenha feito Durant a digitação dos códigos, você pode usar esse botão para reorganizar o código para você. Permitem adicionar comentários de bloco (/* texto do comentário */), comentário de linha (// texto do comentário) e remover os comentários. Todos os nossos códigos terão comentários. Esse é um bom costume de ser ter ao criar seus códigos, pois torna fácil o entendimento do que se está fazendo. Esse botão liga / desliga o assistente de código do Flash. Em nosso curso vamos trabalhar com ele praticamente desligado. Vamos nós mesmos digitar os nossos códigos. Utilizando o Script Assist Para quem está iniciando no Flash a forma recomendável para se adaptar a utilização do ÀS é através do Script Assistance. Desenhe um objeto em sua tela e converta-o em símbolo do tipo botão. Após ter convertido seu objeto para símbolo do tipo botão, clique sobre ele e pressione F9 Na janela de actions clique no botão com o sinal de mais (+), depois navegue por Global Functions, Timeline Control, goto, clique na opção goto Adobe Flash CS4 81 No painel de ações vai aparecer na tela de bloco de ações: on (release){ gotoAndPlay(1); } Explicando o que está escrito on (release)
É o evento que executa a ação, no caso seria “ao soltar”. gotoAndPlay(1)
Ação ser executada, no caso vá ao quadro 1 e inicie Quando se usa o Script Assistance na parte superior abre-se algumas opções de mudança em suas actions. Estando com a ação “gotoAndPlay(1)” selecionada as opções na janela são: Go to and play
Vá ao um determinado local e inicie; Go to and stop
Vá ao um determinado quadro e pare; Scene
Qual a cena em que deve ocorrer a ação; Frame
Para qual quadro deve ocorrer à ação. Ao clicar no evento “on (release)”, as opções superiores serão as seguintes: Adobe Flash CS4 82 Os principais eventos a serem adicionados a botões e Movie Clips são: Press
Ao pressionar; Release
Ao soltar; releaseOutside
pressionado sobre o botão e solto fora dele; rollOver
rolar sobre; rollOut
rolar fora; dragOver
Arrastar para cima do botão; dragOut
Arrastar para fora do botão; keyPress
Alguma tecla é pressionada. É importante lembrar que as opções que foram mostradas acima são referentes às ações de Timeline goto. Ações básicas do Flash play()
Instrui o SWF a reproduzir o filme a partir do ponto onde ele se encontra; stop()
Instrui o SWF a parar o filme; gotoAndPlay e gotoAndStop()
Instruem o Flash para ir a um determinado frame ou cena e continuar (gotoAndPlay) ou parar (gotoAndStop). getURL
Semelhante à função de link do HTML, como o nome diz, pegue a URL, sua sintaxe é simples: getURL(“http://www.adobe.com.br“, ”_blank”); É importante sempre definir o tipo de janela a ser aberto na action, no exemplo a mesma estava _blank, que fará o link abrir em uma nova janela, Adobe Flash CS4 85 Vá agora ao frame 60 e selecione novamente o botão. Na esquerda da tela agora abra a opção “Browser/Network”, depois de um duplo clique na opção GETURL Na parte superior da janela de actions, será necessário preencher o endereço do que deve ser aberto e tipo de janela. Vamos fazer também com que o botão ao ser clicado nesse quadro inicie novamente a animação. Clique no bloco de ações na linha de getURL para selecioná-la, depois dê um Adobe Flash CS4 86 duplo clique na opção goto na esquerda da janela, automaticamente será acrescentada a nova linha abaixo de getURL. Teste a sua animação. Programação Centralizada e Descentralizada Programação centralizada é aquela onde o objeto é instanciado dentro do flash e a ação para ele é feita na timeline. Isso poupa a redigitação e leitura de código. Programação descentralizada é aplicada diretamente no objeto, conforme utilizamos até o momento. É aconselhável que ao se familiarizar com as ações do Flash utilizar somente a programação centralizada. Em AS3 não existe programação centralizada, ou seja, não se pode programar diretamente no objeto. Vamos a um exemplo para ver como aplicarmos as duas formas. Em novo filme do Flash crie duas formas e as transforme em Botões. (Desenhe sua forma, pressione a tecla F8, escolha o tipo Button e confirme a criação). Adobe Flash CS4 87 Clique sobre o botão cinza e pressione F9. Desligue a opção Script Assistance, assim podemos digitar nossas ações. Adicione a seguinte ação: on(press){ trace(“Esse é um modelo de programação descentralizada”); } Explicando o código acima: on(press){
define o evento ao pressionar, ou seja, estou dizendo ao Flash que algo será feito ao objeto ser pressionado. Os únicos objetos que permitem AS, são o Button e Movie Clips. Trace(“Esse...”);
Aqui deve ficar a ação que deve ser feita quando o botão for pressionado. No caso usei o trace que é um comando de testes, ele não aparece em nenhum lugar fora do Flash. Pressione CTRL+ENTER para testar seu filme e observe na barra de Output que ele vai escrever o que você pediu, Adobe Flash CS4 90 Criando um carregador simples Vamos criar um carregador simples. O primeiro quadro deve ser destinado à 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. } else { Adobe Flash CS4 91 gotoAndPlay (1); }
Caso a quantidade de quadros ainda não tenha sido toda carregada ele volta ao quadro 1. Isso se repete até que o filme tenha sido todo carregado. APLICAÇÃO STAND ALONE Podemos utilizar o Flash para aplicações executáveis, ou seja, podemos usar todos os recursos do Flash para criação de aplicações executáveis. Esse recurso é muito utilizado para criação de CD- multimídia. Basta apenas após terminar o seu filme no assistente de publicação marcar a opção Windows Projector. A ação utilizada pelo Flash para esse recurso é FSCOMMAND que está dentro do painel de ações na pasta Browser / Network. A instrução FS Command nos permite enviar comandos de dentro do FLASH para outros programas externos a ele. Adobe Flash CS4 92 Com ele podemos controlar o Stand-Alone Player do Flash e qualquer outra aplicação que possuir controles Active X como o JavaScript na WEB, o Director, O Visual Basic, o C++ e outros. O FS Command nos permite especificar dois parâmetros: commands e arguments. Existem comandos e argumentos pré-definidos que podemos usar sem termos que digitar e que funcionam somente para o Stand Alone Player. O Stand Alone e Player é um recurso do Flash que nos permite basicamente visualizar uma animação sem precisar utilizar o Flash. Esse recurso reproduz as animações exatamente como elas irão aparecer num Browser ou em uma aplicação Active X. Quando clicamos sobre um arquivo com extensão SWF o Stand Alone Player abre uma janela e reproduz a animação, sem abrir o Flash. Esta janela é chamada de PROJETOR. Podemos também publicar o filme como projetor, este assunto veremos mais adiante. Abaixo seguem os comandos do FS Command Quit - Fecha o Projetor Fullscreen (true ou false) - True exibe a animação em tela cheia, False retorna ao tamanho normal Allowscale (true ou false) - True permite que a animação seja escalada de forma que ela preencha todo o tamanho do projetor. False a animação sempre será exibida em seu tamanho original sem poder ser escalada. Showmenu (true ou false) - True permite a exibição completa do botão direito no projetor. False exibe somente a opção “ about flash player” no projetor. Exec (caminho do arquivo) - Executa um aplicativo do projetor. Adobe Flash CS4 95 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. Macintosh Projector: Funciona da mesma maneira que para o Windows , só que para a plataforma MAC. A guia Flash permite definir a versão do Flash Player para seu filme, ordem de carregamento do filme, versão de actionScript. Em Images and Sounds podemos definir a qualidade de saída das imagens e dos arquivos de áudio. A terceira opção permite definir as propriedades de seu SWF como compressão, inclusão de camadas ocultas, incluir metadados, etc... Em Advanced podemos gerar um relatório de publicação, proteger o swf contra importação,etc... Adobe Flash CS4 96 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. Adobe Flash CS4 97 CONCLUSÃO Com certeza a versão CS4 do Adobe Flash está bem amadurecida, permitindo a designer, animadores e developers explorar a ferramenta em seus projetos, seja ele um website, uma aplicação multimídia, um banner, etc...