Flash CS4

Adobe Flash CS4:

Adobe Flash CS4: Multimdia Interativo

SumrioUnidade1: Introduo Sobre o Curso .....................................................................................................6 Estrutura do Curso..............................................................................................6 Unidade 2: O Ambiente de Trabalho do Flash CS4 A Tela Inicial (Start Page) ..................................................................................8 O Layout do Flash ..............................................................................................9 Personalizando a Interface .................................................................................10 Painel Properties.................................................................................................11 A Timeline ..........................................................................................................12 O Painel Tools ....................................................................................................13 FLA e SWF.........................................................................................................13 Unidade 3: Modos de Desenho e Objetos Grficos Modo Object Drawing........................................................................................16 Object Primitive .................................................................................................17 Formas Rectangle e Oval ...................................................................................17 Forma PolyStar...................................................................................................18 Desenhando com a Ferramenta Pencil ...............................................................18 Pintando com o Brush ........................................................................................18 A Ferramenta Pen ...............................................................................................19 Ajustando e Remodelando os Segmentos ..........................................................20 Transformando Objetos ......................................................................................21 O Painel Align ....................................................................................................22 Cores e Gradientes .............................................................................................22 Laboratrio: Iniciando a Montagem do Hotsite .................................................24 Unidade 4: Usando Smbolos e Animando Tipos de smbolos ...............................................................................................26 Biblioteca ...........................................................................................................27 Trabalhando com Linhas de Tempo ...................................................................28 Animao Interpolada ........................................................................................29 Usando o Motion Editor .....................................................................................30 Interpolao de Formas ......................................................................................31 Shape Hints ........................................................................................................32 Animao Quadro a Quadro ...............................................................................33 Movimentando Objetos no Espao 3D...............................................................33

2


Painel Motion Presets .........................................................................................34 Unidade 5: Trabalhando com Camadas e Textos As Camadas (Layers) .........................................................................................36 Distribuindo Elementos em uma Camada ..........................................................37 Camada Motion Guide .......................................................................................37 Ferramenta Text Tool .........................................................................................38 Transio entre Textos ........................................................................................39 Importando Mdias .............................................................................................40 Unidade 6: Mscaras na Animao Usando Mscaras................................................................................................44 Efeitos de Preenchimento ...................................................................................45 Mscara Arrstavel .............................................................................................46 Mscara com Gradiente ......................................................................................47 Criando Animaes com Filtros .........................................................................49 Laboratrio: Textos como Mscaras ..................................................................50 Laboratrio: Movimento com Mscaras ............................................................50 Unidade 7: Cinemtica Inversa (IK) Cinemtica Inversa (IK) ....................................................................................52 Adicionando Bones a Smbolos .........................................................................52 Adicionar Bones a Shapes ..................................................................................54 Convertendo a Armadura em um Smbolo .........................................................55 Padres com a Ferramenta Spray Brush ............................................................56 Desenhando com a Deco Tool ............................................................................57 Unidade 8: Criando Botes O Smbolo Boto ................................................................................................60 Animando os Botes ..........................................................................................61 Personalizando o Cursor.....................................................................................62 Unidade 9: Introduo ao ActionScript Utilizando uma Sintaxe de Script Adequada ......................................................67 Viso Geral do Painel Action .............................................................................68 Unidade 10: Navegao no Flash Carregando Arquivos Externos ..........................................................................72 Navegao na Timeline ......................................................................................75 Usando Label......................................................................................................76 Criando Rolagem de Contedo ..........................................................................77 Os Componentes no Flash ..................................................................................803


Unidade 11: Trabalhando com Textos Dinmicos Busca de Variveis em um Arquivo de Texto.....................................................84 Texto com Formatao HTML ...........................................................................86 Unidade 12: udio no Flash Importando udio para o Flash..........................................................................90 Configuraes do Som no Flash .........................................................................90 Carregando udio Externo.................................................................................93 Inserindo udio em Botes ................................................................................95 Unidade 13: Criando Formulrio Utilizando Componentes ....................................................................................98 Configurando o Envio de Dados ........................................................................100 Unidade 14: Preloader Construindo um Preloader..................................................................................104 Unidade 15: Criando Banners Animados Criando um Banner ............................................................................................108 Banner Expansvel..............................................................................................111 Usando Transies com Action Script ...............................................................114 Unidade 16: Importando Vdeo Importando Vdeos .............................................................................................118 Usando o Adobe Media Encoder CS4 ................................................................120 Mscaras em Vdeos...........................................................................................121 Vdeo em Tela Cheia ..........................................................................................122 Unidade 17: Publicando Documentos no Flash Configuraes de Publicao .............................................................................126 Flash ...................................................................................................................127 HTML.................................................................................................................127 GIF .....................................................................................................................129 PNG ....................................................................................................................130 FullScreen...........................................................................................................130 Unidade 18: Melhores Prticas Organizao da Linha de Tempo e da Biblioteca ...............................................134 Gravao de Arquivos e Controle de Verso ......................................................135 Organizao do ActionScript em um Aplicativo ................................................135 Convenes de Vdeo .........................................................................................135 Exportao, Compresso e Hospedagem de Arquivos FLV...............................1364


Otimizao dos Arquivos FLA para Sada SWF ................................................137

5


Unidade1: Introduo

Sobre o CurSoO Curso Adobe Flash CS4: Multimdia Interativo apresenta aos alunos as principais ferramentas da ltima verso do programa, fornecendo inmeras dicas e tcnicas para a sua aplicao. O curso de Flash CS4 trs o que de mais atual a linguagem ActionScript 3.0 trouxe para esta verso do programa. O aluno se surpreender com a facilidade e a eficincia que o Adobe Flash CS4 pode realizar em projetos multimdia. Para o profissional, o curso fundamental por fornecer uma base para entender a animao 2D e usar recursos de animaes 3D deste programa.

eStrutura do CurSoAs primeiras unidades apresentam a interface grfica deste software, como fazer uma animao bsica e visualiz-la. Agrega, tambm, as ferramentas de desenho e as formas geomtricas deste software. As unidades seguintes abordam tpicos como: animao com mscaras, animando com filtros, botes e carregamentos de arquivos externos. Tambm, ser montado um site inteiro em Flash, com recursos de udio, vdeo e utilizao de componentes. O curso trs exerccios para criar e manipular elementos visuais como: transies atravs de programao e criao de banners. Durante o transcorrer de todo o curso o aluno aprender a trabalhar de forma autnoma e criativa com este software, conhecendo as mudanas e novidades incorporadas ao programa.

6

Unidade 2: O Ambiente de Trabalho do Flash CS4 A Tela Inicial (Start Page) O Layout do Flash Personalizando a Interface Painel Properties A Timeline O Painel Tools FLA e SWF


Unidade 2: O Ambiente de Trabalho do Flash CS4As animaes para Web, tempo atrs, eram feitas principalmente com GIFs animados. A principal dificuldade para os desenvolvedores do Flash era a necessidade de plugin, entretanto a quantidade de usurios que possui o plugin cresceu tanto que o software se tornou o principal meio para a produo de animaes para Web. Na verso CS4 o Flash no vem mais com dois programas distintos. Possui apenas a verso Adobe Flash CS4 Professional.

a tela InICIal (Start Page)Quando iniciamos o Adobe Flash CS4 aparece tela inicial, aonde podemos escolher entre abrir um dos trabalhos recentes criados com o Flash, criar um arquivo em branco e escolher entre as seguintes possibilidades: - Flash File: novo documento bsico do Flash em branco, opo que utiliza a estrutura de criao tradicional do programa. Temos esta opo tanto para a verso 2.0 quanto 3.0 do ActionScript. - Flash File (Adobe AIR): O Adobe AIR a execuo entre vrios sistemas operacionais, permite potencializar os recursos locais da rea de trabalho e os dados para garantir experincias mais pessoais e

envolventes.

- Flash File (Mobile): utilizada para criar um arquivo compatvel com o Flash Lite (Flash para dispositivos mveis). - ActionScrit File: gera outro documento numa espcie de editor de texto dentro do Flash para digitarmos scripts do Flash. Este arquivo possui a extenso . as. - ActionScript Communication File: funciona da mesma forma que a opo anterior, mas destinado a escrever scripts para o Flash Media Server (servidor para aplicaes server) O arquivo gerado ter a extenso . asc.8


- Flash Javascript File: permite criar scripts que controlem e auxiliem a utilizao do programa. O arquivo ter a extenso JSFL. - Flash Project: Um projeto Flash pode agrupar e organizar diversos arquivos e posteriormente public-los no servidor de hospedagem que for configurado. possvel ainda criar um trabalho baseado num modelo (Template) preexistente.

o layout do FlaShO layout do Flash desenvolvido para o melhor aproveitamento do espao, facilitando sua utilizao. Na tela inicial crie um novo documento (Flash File ActionScript 3.0).

Do lado direito temos os painis juntos. Podemos expandi-los ou retra-los apenas clicando nas setas ao lado direito superior.

Ao escolher esta opo vemos os painis em forma de cones:

9


Alguns painis possuem opes adicionais que podem ser chamadas clicando no cone a sua direita no topo. Para abrir um painel que no esteja na tela, clique no menu Window, e entre suas opes escolha o painel desejado. Tambm, possvel alterar a posio de um painel bastando arrast-lo pela sua barra superior. Para remover um painel do local em que se encontre encaixado, basta arrast-lo para fora de sua rea, primeiro aproximando o cursor do topo do painel, em seguida pressionando o boto do mouse e arrastando a janela para a rea desejada.

Para anex-lo a alguma rea, basta mov-lo e quando estiver em um local que possa ser encaixado, a rea ser realada (em tom de azul). Se solt-lo em uma rea que no ficou realada, o painel ficar flutuante na tela. Se em algum momento desejarmos que todos os painis sejam escondidos, basta clicarmos na tecla F4.

PerSonalIzando a InterFaCe importante a customizao da interface do Flash de acordo com seu foco de trabalho, que ir permitir uma maior produtividade do seu trabalho. Temos na parte superior do Flash uma rea chamada Workspace, que responsvel por escolher e gerenciar os layouts de rea de trabalho como: forma e posicionamento dos painis. Por default temos a rea de trabalho Classic.10


possvel gravar as configuraes que tenhamos criado para escolh-la posteriormente, escolhendo a opo New Workspace. Na janela digite um nome para este layout de painis e clique em OK. Caso queira renomear ou remover um modelo de layout criado na rea de Workspace basta escolher a opo Manage Workspaces e definir as opes desejadas na janela.

PaInel ProPertIeSO Painel Properties fcil acesso aos atributos usados mais frequentemente da seleo atual, no Palco ou na Linha do tempo. possvel fazer alteraes nos atributos do objeto ou do documento, sem acessar menus ou painis que tambm controlam esses atributos.

Dependendo da seleo atual, este painel exibe informaes e configuraes para o documento, o texto, o smbolo, a forma, o bitmap, o vdeo, o grupo, o quadro ou a ferramental atual. Quando dois ou mais tipos diferentes de objetos so selecionados, o Painel Properties exibe o nmero total de objetos selecionados. Uma rea muito importante no Flash o palco (Stage). Somente os elementos que estiverem nessa rea aparecero do filme gerado pelo programa. O Stage semelhante lente de uma filmadora, pois apenas o que estiver no seu foco ser apresentado como resultado final do filme. Quando no estivermos com nenhum objeto selecionado no palco a opo basta clicarmos no boto Edit ao lado da opo Size.

- Na rea Dimensions definimos Largura (Width) e altura (Height) do Stage do Flash. - Na rea Match podemos fazer com que as dimenses do Stage se modifiquem de acordo com a rea de impresso (Printer), que acomodem todos os elementos em cena (Contents) ou que utilizem dimenso padro (Default). - Em Background color escolhemos a cor do Stage do Flash. - Em Frame rate (por default o flash vem com 24) definimos a quantidade de frames

11


por segundo do documento. - Em Ruler Units colocamos a medida das rguas. Se desejarmos que essas configuraes sejam a padro para os novos filmes do Flash (exceto os metadados, que devem ser criados para cada filme), basta clicarmos no boto Make Default.

a tImelIneA linha do tempo organiza e controla o contedo de um documento com o passar do tempo em camadas e quadros. Como os filmes, os documentos Flash dividem espaos de tempo em quadros. As camadas so como vrias faixas de filme empilhadas uma em cima da outra, cada uma contendo uma imagem diferente, que exibida no Palco. Os principais componentes da Linha do tempo so camadas (layers), quadros (frames) e o indicador de reproduo. As camadas em um documento so listadas em uma coluna no lado esquerdo da Linha do tempo. Os quadros contidos em cada camada so exibidos em uma linha direita do nome da camada. O cabealho da Linha do tempo, na parte superior da Linha do tempo, indica os nmeros dos quadros. O indicador de reproduo indica o quadro atual exibido no Palco. Durante a reproduo de um documento, o indicador de reproduo movido da esquerda para a direita em toda a Linha do tempo. Sua velocidade medida pela quantidade de quadros que passa a cada segundo (frames por segundo) e quanto maior a quantidade de quadros por segundo, mais rpida a animao estar. Para configurarmos essa velocidade, no painel de propriedades, basta alterarmos o valor do Frame Rate (FPS).

12


o PaInel toolS

Este painel contm as ferramentas necessrias para desenharmos, criarmos objetos, definirmos cores no Flash e usar as ferramentas 3D. Toda a ferramenta que possui uma pequena seta preta na parte inferior direita possui mais ferramentas. Quando o boto do mouse mantido pressionado sobre um cone, as outras ferramentas no grupo so exibidas em um menu pop-up.

Dependendo da ferramenta selecionada, talvez um conjunto de modificadores seja exibido na rea de opes, na parte inferior do painel Tools. Podemos, tambm, personalizar este painel clicando em Edit > Customize Tools Panel.

Fla e SWFOs arquivos editveis do Adobe Flash possuem o formato.fla, entretanto, por guardarem todas as informaes necessrias para edio, possuem tamanhos maiores que o ideal para Web. Quando finalizamos um filme, geramos um arquivo extremamente leve que ser levado para Web, o formato swf (Shockwave Flash). O swf pode ser importado para um novo filme, mas no pode ser editado.

13


Anotaes:

14

Unidade 3: Modos de Desenho e Objetos Grficos Modo Object Drawing Object Primitive Formas Rectangle e Oval Forma PolyStar Desenhando com a Ferramenta Pencil Pintando com o Brush A Ferramenta Pen Ajustando e Remodelando os Segmentos Transformando Objetos O Painel Align Cores e Gradientes Laboratrio: Iniciando a Montagem do Hotsite


Unidade 3: Modos de Desenho e Objetos GrficosNo Flash, podemos criar vrios tipos de objetos grficos com diferentes modos de desenho e ferramentas de desenho. Cada tipo tem suas prprias vantagens e desvantagens. Entendendo os recursos dos diferentes tipos de objeto grfico, tomaremos boas decises sobre quais tipos de objetos usar em nosso trabalho.

modo objeCt draWIngPor padro (quando o modo Object Drawing estiver desativado) as formas que criarmos no sero consideradas como objetos separados. Por exemplo, se desenharmos um crculo e sobrepor um crculo menor sobre ele ( de cores diferentes) e depois selecionar o crculo menor e mov-lo, a parte do segundo crculo sobreposta ao primeiro removida. Quando uma forma tem um traado e um preenchimento, estes so considerados elementos grficos separados, que podem ser selecionados e movidos de forma independente. Quando as duas formas forem de cores iguais e estiverem com o modo Object Drawing desativado as formas se unem.

Quando trabalhamos com o modo Object Drawing ativado, os objetos que criarmos sero tratados como objetos separados, os quais podem ser sobrepostos a outros sem haver a perda de nenhuma informao. Um objeto criado por este modo diferenciado na tela por uma rea retangular envolvendo-o. Se a forma foi desenhada sem o modo Object Drawing ativado, podemos mudar o mesmo clicando no menu Modify > Combine Objects > Union.

16


objeCt PrImItIvePrimitivas de objetos so formas grficas que permitem que ajustemos suas caractersticas. Isso permite que controlemos precisamente o tamanho, o raio do canto e outras propriedades da forma depois de cri-la sem ter que desenh-la desde o comeo. Os dois tipos de primitivas que esto disponveis so: Rectangle Primitive e Oval Primitive. Quando criamos retngulos ou formas ovais usando as ferramentas Primitve Rectangle ou Primitive Oval, o Flash desenha as formas como Object Drawing. Com essas ferramentas podemos especificar o raio do canto de retngulos, o ngulo inicial, final e o raio interno de ovais usando os controles do Painel Properties.

O painel properties retm os valores do ltimo objeto que voc editamos. Por exemplo, se voc modificar um retngulo e depois desenhar um segundo retngulo.

FormaS reCtangle e ovalCom essas ferramentas Oval e Rectangle podemos criar formas geomtricas bsicas e aplicar traados, preenchimentos e especificar cantos arredondados. Para as estas ferramentas, arraste e mantenha a tecla Shift pressionada para restringir as formas em crculos e quadrados. Para determinar um tamanho especfico destas formas, selecione a ferramenta Oval ou Rectangle e pressione a tecla ALT. Em seguida, clique no Palco para exibir a caixa de Oval Settings.

17


Forma PolyStarSelecione a ferramenta PolyStar clicando e segurando o boto do mouse na ferramenta Rectangle e selecionando no menu pop-up que aparece. No painel Properties clique no boto Options e na caixa de dilogo Tools Settings, escolha a opo star.

Clicando no palco e arrastando j teremos uma estrela.

deSenhando Com a Ferramenta PenCIlPara desenhar linhas e formas, use a ferramenta Pencil (lpis) quase da mesma maneira em que usa um lpis de verdade para desenhar. Para aplicar suavizao ou correo s linhas e formas enquanto desenha, selecione um modo desenho para a mesma. - Straighten: para desenhar linhas retas e converter aproximaes de tringulos, ovais, crculos, retngulos e quadrados nessas formas geomtricas comuns. - Smooth: para desenhar linhas curvas suaves. - Ink: para desenhar linhas a mo livre sem aplicar modificaes.

PIntando Com o bruShA ferramenta Brush desenha traados semelhantes a pinceladas. Ela cria efeitos especiais, inclusive caligrficos. Selecione a forma e o tamanho do pincel usando modificadores da ferramenta Brush, na parte inferior do painel Tools.

18


a Ferramenta PenPara desenhar caminhos precisos como linhas retas ou curvas suaves e fluidas, usamos a ferramenta Pen. Clicamos para criar pontos nos segmentos de linha reta e arrastamos para criar pontos nos segmentos de linha curva. O primeiro segmento desenhado no fica visvel at que cliquemos num segundo ponto de ancoragem (a menos que tenhamos especificado Show pen preview na categoria Drawing em Preferences). O caminho mais simples que podemos desenhar com a ferramenta Pen uma linha reta, feita com a seleo da ferramenta Caneta para criar dois pontos de ancoragem. Se continuarmos clicando, criaremos um caminho composto de segmentos de linha reta conectados por pontos de canto. Para fechar o caminho, posicione a ferramenta Pen sobre o primeiro ponto de ancoragem (vazio). Um pequeno crculo aparecer ao lado do ponteiro da ferramenta Pen. As curvas so mais fceis de serem editadas e seu sistema pode exibi-las e imprimi-las mais rpido se elas forem desenhadas usando o menor nmero de pontos de ancoragem possvel. O uso de muitos pontos tambm pode gerar salincias indesejadas em uma curva. Para desenhar uma curva, sigua os passos: - Posicione a ferramenta Pen no incio da curva e mantenha o boto do mouse pressionado. - O primeiro ponto de ancoragem aparece e o ponteiro da ferramenta Pen muda para uma seta. - Arraste para definir a inclinao do segmento curvado que estiver criando e, em seguida, solte o boto do mouse. Para adicionarmos um ponto de ancoragem, posicionamos o ponteiro sobre um segmento do demarcador e clicamos em cima da curva. Para excluirmos um ponto de ancoragem, posicionamos o ponteiro sobre um ponto de ancoragem com a ferramenta Delete Anchor Point

19


e clicamos.

ajuStando e remodelando oS SegmentoSPara ajustarmos um segmento reto ou curvo, selecione a ferramenta Subselection (seta branca) e selecione o segmento. Use-a, tambm, para arrastar um ponto de ancoragem do segmento para uma posio nova. Ao selecionarmos o ponto, veremos uma ou duas alas que orientam a curvatura. Para alterar a curva, podemos arrastar as extremidades dessas alas at que a forma esteja do nosso agrado.

Para ajustar a forma da curva nos dois lados do ponto de ancoragem, arraste o ponto de ancoragem ou a ala. Para remodelar uma linha ou contorno da forma, arraste qualquer ponto da linha usando a ferramenta Selection (seta preta). O ponteiro muda para indicar o tipo de remodelagem que pode executar na linha ou no preenchimento.

O Flash ajusta a curva do segmento de linha para acomodar a nova posio do ponto movido. Se o ponto reposicionado for um ponto final, a linha ser alongada ou encurtada. Se o ponto reposicionado um canto, os segmentos de linha que formam o canto permanecem retos enquanto se tornam mais longos ou mais curtos. Para modificar os pontos usamos a ferramenta Subselect . Para isso devemos selecionar a linha com a ferramenta e clicar sobre os pontos que desejamos alterar.

20


tranSFormando objetoSPodemos realizar transformaes individuais ou combinar vrias transformaes, tais como mover, girar, dimensionar, inclinar e distorcer, usando a ferramenta Free Transform. Sigua os procedimentos abaixo: - Selecione um objeto grfico, grupo, ocorrncia ou bloco de texto no Palco. - Clique na ferramenta Free Transform. Mover o ponteiro sobre e ao redor da seleo faz com que o ponteiro mude para indicar qual funo de transformao est disponvel. - Para transformar a seleo, arraste as alas.

- Para mover a seleo, posicione o ponteiro sobre o objeto na caixa delimitadora e arraste o objeto para uma nova posio. No arraste o ponto de transformao. - Para definir o centro de rotao ou dimensionamento, arraste o ponto de transformao para um novo local.

- Para girar a seleo, posicione o ponteiro perto da parte de fora da ala do canto e arraste. A seleo gira em torno do ponto de transformao. Arraste com a tecla Shift pressionada para girar em incrementos de 45. - Para girar ao redor do canto oposto, arraste com a tecla Alt pressionada. - Arraste com a tecla Shift pressionada para redimensionar proporcionalmente. - Para dimensionar somente na respectiva direo, arraste uma ala do canto ou uma ala lateral horizontal ou verticalmente.

21


- Para inclinar a seleo, posicione o ponteiro no contorno entre as alas de transformao e arraste. - Para finalizar a transformao, clique fora do item selecionado.

Pode ser usado, tambm, o modificador de Envelope que permite uma deformao nos objetos. Um envelope uma caixa delimitadora que contm um ou mais objetos. As alteraes feitas em uma forma de envelope afetam a forma dos objetos no envelope. Editamos a forma de um envelope ajustando seus pontos e alas tangentes. Para acionlo clique me Modify > Transform > Envelope.

o PaInel alIgnO painel Align permite que alinhemos os objetos selecionados ao longo do eixo horizontal ou vertical. Podemos alinhar os objetos verticalmente ao longo da borda direita, do centro ou da borda esquerda dos objetos selecionados ou horizontalmente ao longo da borda superior, do centro ou da borda inferior dos objetos selecionados. Quando a opo To stage estiver selecionada indica que todas as modificaes sero aplicadas em relao Stage. Temos uma facilidade no Flash quanto temos mais de um elemento no palco. Enquanto arrastamos algum objeto aparecem linhas pontilhadas indicando um possvel alinhamento em relao a outro elemento. Este o modo

Snap Align.

Para ativar este ajuste, escolha a opo de menu: View > Snapping > Snap Align (por padro esta opo j vem habilitada)

CoreS e gradIenteSModelos de cores descreve as cores que vemos e com que trabalhamos em grficos digitais. Cada modelo de cor, como RGB, HSB ou CMYK, representa um mtodo diferente para descrever e classificar cor. Os modelos de cores usam valores numricos para representar o espectro visvel da cor. O espao de cor uma variante de um modelo de cor e tem uma gama (intervalo) especfica de cores. Por exemplo, dentro do modelo de cores RGB, h vrios espaos de cores: Adobe RGB, sRGB e Apple RGB.

22


Embora cada um desses espaos de cor defina a cor usando os mesmos trs eixos (R, G e B), as respectivas gamas so diferentes. Como cada dispositivo tem o seu prprio espao de cores, cada um pode reproduzir cores apenas na sua gama. Ao criarmos cores para uso em documentos Flash, devemos lembrar que, embora seja impossvel coincidir com exatido todas as cores em dispositivos diferentes, podemos obter bons resultados considerando os recursos de exibio grfica dos dispositivos em uso por nosso pblico-alvo. O painel Color permite que modifiquemos a paleta de cores de um FLA e alteremos as cores de traados e preenchimentos.

- Para aplicar a cor na arte existente, selecione um objeto ou objetos do Palco e selecione Window > Color. - Para selecionar a tela do modo cores, selecione RGB (configurao padro) ou HSB no menu do painel no canto superior direito. - Clique no cone Stroke ou Fill para especificar o atributo a ser modificado. Um gradiente um preenchimento multicolorido no qual uma cor gradualmente muda para outra cor. O Flash permite que apliquemos at 15 transies de cor em um gradiente. A criao de gradiente uma boa maneira de criar uma graduao suave de cores em um ou mais objetos. Para aplicar um preenchimento gradiente em arte existente, selecione um objeto ou objetos do Palco: - Se o painel Cor no estiver visvel, selecione Window > Color. - Selecione o tipo de gradiente no menu Style: Linear: cria um gradiente que matize do ponto inicial ao final numa linha reta. Radial: produz um gradiente que se mistura para fora em um caminho circular a partir de um ponto focal central. Depois de aplicado o gradiente podemos modific-lo selecionando a ferramenta Gradient Transform. Pressione Shift para restringir a direo do preenchimento gradiente linear para mltiplos de 45.23


laboratrIo: InICIando a montagem do hotSIte1- Crie um arquivo de 500x500 pixels. 2- Desenhe um retngulo com preenchimento de gradiente em tons de cinza, deixando as bordas um pouco arendondadas. 3- Posicione esta forma no centro do palco. 4- Mude a cor de fundo do palco a seu gosto. 5- Salve este documento como index.fla

24

Unidade 4: Usando Smbolos e Animando Tipos de smbolos Biblioteca Trabalhando com Linhas de Tempo Animao Interpolada Usando o Motion Editor Interpolao de Formas Shape Hints Animao quadro a quadro Movimentando objetos no espao 3D Painel Motion Presets


Unidade 4: Usando Smbolos e AnimandoOs elementos desenhados no Flash com as suas ferramentas de desenho correspondem a formas vetoriais. Esses desenhos no suportam determinados tipos de animao que o Flash pode realizar, bem como no permitem diversas aplicaes. Para tornar o elemento compatvel com as aplicaes, necessrio convert-lo em smbolo. Ao transformarmos um desenho ou objeto em um smbolo, aplicamos um comportamento a esse objeto, indicando que agora ele deve receber aes e comportar-se de forma especfica. Todo smbolo criado armazenado na Library (Biblioteca) e pode ser reutilizado diversas vezes, o que no aumenta de forma significativa o tamanho final do filme.

tIPoS de SmboloSCada smbolo possui uma Linha de tempo e um Palco exclusivos e completos, com camadas. Pode adicionar quadros, quadros-chave e camadas Linha de tempo de um smbolo, da mesma forma que na Linha de tempo da cena principal. Temos os seguintes smbolos no Flash: - Grficos (Graphic): usamos estes smbolos grficos para imagens estticas e para criar partes reutilizveis de animao vinculadas Linha de tempo principal. Os smbolos grficos operam em sincronizao com a Linha de tempo principal. Em uma sequncia de animao de smbolo grfico, os controles e sons interativos no funcionam. Os smbolos grficos adicionam menos tamanho ao arquivo FLA do que botes ou clipes de filme, pois no possuem Linha de tempo. - Botes (Button): usamos estes smbolos para criar botes interativos que respondam a cliques do mouse, rolagens ou outras aes. - Clipe de Filme (Movie Clip): com estes smbolos podemos criar partes reutilizveis de animao. Os clipes de filme tm a sua prpria Linha de tempo com vrios quadros, independente da Linha de tempo principal: imagine-os como aninhados dentro de uma Linha de tempo principal que pode conter controles e sons interativos e at outras ocorrncias de clipe de filme. Tambm podemos criar botes animados, colocando ocorrncias de clipe de filme dentro da Linha de tempo de um smbolo de boto. Para criar um smbolo sigua os passos: 1- Crie uma forma semelhante a uma lua no palco.

26


2- Com essa forma selecionada, clique no menu: Modify > Convert to Symbol ou pressione a tecla F8.

Abre-se a tela Convert to Symbol. Nessa tela, alm de nome-lo, podemos definir que tipo de smbolo o objeto ser. Ao definir o tipo de smbolo, estamos determinando de que forma nosso objeto se comportar. 3- Atribua um nome ao seu smbolo, definindo que ele deve ser um Movie Clip. Observe que ao lado das opes de comportamento do smbolo temos uma opo denominada Registration, na qual podemos definir o ponto de registro do smbolo, o qual muito til, uma vez que permite determinar o ponto de rotao de um smbolo, por exemplo. 4- Deixe marcada a opo padro (ponto superior esquerdo). 5- Clique em OK.

bIblIoteCaOs smbolos ficam armazenados para que possamos utiliz-los a qualquer momento no Flash. Para abrir a biblioteca escolha o menu: Window > Library ou utilize as teclas de atalho: CTRL + L. Para aplicar um smbolo no palco que esteja na biblioteca, basta arrast-lo da biblioteca para o palco. Quando um elemento levado da biblioteca para o palco recebe o nome de instncia, uma vez que ele apenas uma apario do smbolo na tela. Podemos ter um smbolo aparecendo diversas vezes na tela. Neste caso teramos diversas instncias do smbolo no palco. Uma vez que modifiquemos um smbolo, todas as instncias que o usam como referncia tambm sofreram a alterao. 6- Vamos criar uma estrela. Selecione a forma PolyStar Tool e na janela Properties

27


clique em Options e selecione a opo Star 7- Desenhe esta forma no palco do Flash e transforme-a em um smbolo do tipo Movie Clip. Observe que nossos dois smbolos criados esto na biblioteca. Ao convertemos um objeto em Movie Clipe, atribumos a ele a possibilidade de ser animado independentemente do filme principal. 8- Vamos entrar no modo de edio do smbolo estrela. D um duplo clique nela. Na edio deste smbolo temos camadas, o que significa que podemos animar a estrela na sua prpria linha de tempo.

trabalhando Com lInhaS de temPoComo os filmes, os documentos Adobe Flash CS4 Professional dividem espaos de tempo em quadros. Na Linha de tempo, trabalhamos com esses quadros para organizar e controlar o contedo do documento. O quadro-chave um quadro em que aparece uma nova ocorrncia do smbolo na Linha do tempo pela primeira vez. Podemos adicionar um quadro-chave em branco Linha do tempo como alocador de espao dos smbolos que planejamos adicionar posteriormente ou para deixar explicitamente o quadro em branco. O quadro-chave de propriedade aquele em que definimos uma mudana nas propriedades de um objeto para uma animao. O Flash pode interpolar ou preencher automaticamente os valores de propriedade entre os quadros-chave de propriedade a fim de produzir animaes fluentes. Como os quadros-chave de propriedade podemos produzir uma animao sem desenhar cada quadro individualmente, eles facilitam a criao da animao. Uma srie de quadros contendo animao interpolada chamada de interpolao de movimento. Um quadro interpolado qualquer quadro que faa parte de uma interpolao de movimento. Um quadro esttico qualquer quadro que no faa parte de uma interpolao de28


movimento. Organizamos quadros-chave e quadros-chave de propriedade na Linha do tempo para controlar a sequncia de eventos no seu documento e na animao correspondente. 8- Clique no primeiro quadro da layer1 e escolha a opo Create Motion Tween. Automaticamente o Flash cria 24 quadros na linha de tempo.

9- Com a cabea leitora do frame 24, no painel Properties opo Color Effect e escolha Alpha no menu Style. Deixe o Alpha em 0%. 10- Para ver a animao clique em CTRL + Enter. Podemos observar: Uma extenso de quadros com um plano de fundo azul indica uma interpolao de movimento. Um ponto preto no primeiro quadro da extenso indica que a extenso interpolada tem um objeto de destino atribudo a ele. Losangos pretos indicam o ltimo quadro e todos os outros quadros-chave de propriedade. 11- Salve este arquivo na pasta da lio como ceu.fla

anImao InterPoladaAs interpolaes so aplicadas s ocorrncias de smbolos e campos de texto. - Desenhe uma forma no palco. - Na layer 1 selecione o quadro e clique com o boto direito em Create Motion Tween Se o objeto no for do tipo objeto interpolvel uma caixa de dilogo ser exibida. A caixa de dilogo permite converter a seleo em um smbolo movie clipe - Converta a seleo em um movie clipe em Ok. - Para adicionar movimento interpolao clique e arraste o objeto no Palco para uma nova posio.

29


Aparece um caminho de movimento no Palco, mostrando o caminho da posio no primeiro quadro da extenso de interpolao at a nova posio. - Clique e arraste o final da animao para aumentar o seu tempo de deslocamento.

- Posicione a cabea leitora na linha de tempo no quadro 25, por exemplo, e arraste o smbolo no palco.

Para modificar a trajetria do movimento podemos selecionar a ferramenta Selection e aproximar da trajetria para fazermos um movimento curvo, por exemplo. Toda modificao da animao baseada no objeto, basta posicionarmos a cabea leitora no tempo que queremos que ocorra a modificao e deslocar o objeto no palco.

uSando o motIon edItorO painel Motion Editor permite exibir todas as propriedades de interpolao e os respectivos quadros-chave de propriedade. Ele tambm oferece ferramentas para adicionar preciso e detalhes a interpolaes. - Continuando na mesma animao que estamos trabalhando, selecione o objeto no palco e clique na opo Motion Editor na aba ao lado do painel Timeline.

30


Com o Motion Editor podemos aplicar atenuao a qualquer curva de propriedade. A aplicao de atenuao no Editor de movimento permite criar certos tipos de efeitos complexos de animao sem criar caminhos complexos de movimento. Algumas propriedades tm valores mnimos ou mximos que no podem ser excedidos, como Transparncia Alpha (0-100%). - Na opo Transformation e com a cabea leitora no incio do grfico, selecione Scale X (com a opo Link habilitada) diminuindo o valor e assim diminuindo o tamanho do objeto, tambm. - Posicione a cabea leitora entre os quadros 15 e 20 no grfico a marque 100% para a opo Scale X, que far proporcional ao Scale Y, tambm. Para ajustar quais propriedades aparecem no Editor de movimento, clique no tringulo perto de uma categoria de propriedade para expandir ou reduzir a categoria. Pressionando a tecla CTRL definimos um ponto no grfico.

Pressionando a tecla Alt deixamos este ponto mais suave.

- Teste a animao e veja que a mesma fica mais complexa e suave com o Motion Editor

InterPolao de FormaSNa interpolao de forma, desenhamos uma forma vetorial em um quadro especfico na Linha do tempo e alteramos essa forma ou desenha outra forma em outro quadro especfico. O Flash ento interpola as formas intermedirias para os quadros intermedirios, criando a animao de uma forma se transformando em outra.

31


As etapas a seguir mostram como criar uma interpolao de formas do quadro 1 ao quadro 30 da Linha do tempo. - No quadro 1, desenhe um quadrado com a ferramenta Rectangle. - Selecione o quadro 30 da mesma camada e adicione um quadro-chave em branco, escolhendo Insert > Timeline > Blank Kreyframe, ou pressionando F7. - No Palco, desenhe um crculo com a ferramenta Oval no quadro 30. - Na Linha do tempo, selecione um dos quadros entre os dois quadros-chave na camada que contm as duas formas. - Com o boto direito do mouse escolha Create Motion Tween. O Flash interpola as formas de todos os quadros entre os dois quadros-chave. - Visualize a animao teclando CTRL + Enter.

ShaPe hIntSEm alguns casos a maneira como o Flash interpreta a transio entre as formas um pouco confusa, mas temos um modo de indicar ao Flash como deve ser atravs das Shapes Hints. Essa opo diz que pontos definidos no incio da animao devem corresponder a pontos que definiremos no final. - Na mesma animao que acabamos de fazer, selecione o primeiro quadro da animao e vamos colocar um Shape Hint que servir de referncia para a animao, escolhendo a opo de menu: Modify > Shape > Add Shape Hint. - Um crculo vermelho aparece com a letra a em seu centro. Arraste-o para o canto superior esquerdo da forma. - V ao ltimo quadro da animao e veremos novamente o pequeno crculo. Leve-o para a posio que considerar correspondente ao crculo do primeiro quadro. - Repita estes passos para inserir mais Shape Hints. Importante: Como as Shape Hints utilizam como seus identificadores letras, teremos no mximo 26 Shape Hints. Transio entre Textos

32


anImao Quadro a QuadroEsse processo remonta aos primrdios da animao e se constitui na seqncia de vrias imagens, uma levemente diferenciada da anterior para simular o movimento. o tipo de animao mais trabalhoso, entretanto o que possui resultados mais satisfatrios em termos visuais. - Para criarmos uma animao quadro a quadro, vamos desenhar uma elipse e inserir um Keyframe na posio 2 (a tecla de atalho o F6). - Neste caso, a alterao ser o deslocamento da elipse. Para fazer isso, vamos selecionar o quadro 2 e deslocar o desenho da elipse um pouco para baixo da posio atual. - Repita estes procedimentos at chegar ao quadro 10 da Timeline, sempre primeiro inserindo o quadro e em seguida deslocando um pouco para baixo a forma. Ao final, teremos efetuado nossa primeira animao. Para test-la, podemos pressionar a tecla Enter ou test-la na janela de testes do Flash clicando em CTRL + Enter.

movImentando objetoS no eSPao 3dPodemos mover movie clipes no espao 3D com a ferramenta 3D Translation e 3D Rotation. - Crie uma forma no palco do Flash. - Crie uma animao Motion Tween. - Selecione a ferramenta 3D Translation.

- Para mover o objeto arrastando-o com a ferramenta, mova o ponteiro sobre os controles do eixo x, y ou z. O ponteiro muda de aparncia quando passa sobre um dos controles. Ao selecionarmos vrios movie clipes, podemos mover um dos objetos selecionados com a ferramenta Translao 3D e os outros se movero junto com ele.

33


Podemos girar os movie clipes no espao 3D com a ferramenta 3D Rotation . Um controle de rotao 3D aparece na parte superior dos objetos selecionados no Palco. O controle X vermelho, o controle Y verde e o controle Z azul. - Coloque o ponteiro sobre um dos quatro controles do eixo de rotao. O ponteiro muda de aparncia quando passa sobre um dos quatro controles. - Arraste um dos controles de eixo para girar em torno desse eixo ou o controle de rotao livre (crculo laranja externo) para girar X e Y simultaneamente.

PaInel motIon PreSetSNeste painel salvamos as interpolaes de movimento pr-configuradas que podemos aplicar a um objeto no Palco. Bastando selecionar o objeto e clicar no boto Aplicar, no painel Motion Presets. - Crie uma animao com interpolao de movimento no palco. - Habilite o painel Motion Presets atravs do menu Window. - Selecione o objeto que contm a interpolao. - No painel motion presets clique no cone Save selection as preset.

- Feche este arquivo e crie um novo. - Desenhe outra forma no palco - Com a forma selecionada clique no boto Apply do painel motion presets. O movimento aplicado de forma a comear na posio atual do movie clipe no Palco. Se a predefinio tiver um caminho de movimento associado a ele, o caminho aparece no Palco. Para aplicar a predefinio de forma que o respectivo movimento termine na posio atual do objeto no Palco, pressione a tecla Shift e clique no boto Aplicar.

34

Unidade 5: Trabalhando com Camadas e Textos As Camadas (Layers) Distribuindo Elementos em uma Camada Camada Motion Guide Ferramenta Text Tool Transio entre Textos Importando Mdias


Unidade 5: Trabalhando com Camadas e TextosaS CamadaS (layerS)As camadas (Layers) correspondem a um mtodo de trabalho muito prtico em qualquer tipo de software que se utilize de imagens grficas, sejam elas vetoriais ou bitmap. Elas permitem organizar mais facilmente contedos e localizar elementos. Um projeto em Flash mais facilmente organizado e composto graas s camadas. As camadas podem ser ainda, subdivididas em pastas, que permitem dividir e organizar todas as categorias de objetos em um projeto de maior amplitude. O manuseio de camadas no Flash feito de forma idntica ao de diversos outros programas de edio de imagem. Entretanto, temos algumas opes especiais. - Insert Layer: permite adicionar uma nova camada a lista; - Insert Layer Folder: insere uma nova pasta para organizar as camadas correspondentes. - Delete Layer: remove uma ou mais camadas selecionadas. - Show/Hide All Layers: serve para determinar se as camadas estaro visveis ou no no documento. Ao clicar no olho as camadas ficaro ocultas e ao clicar novamente, sero exibidas. Podemos escolher apenas uma camada desejada, bastando clicar na bolinha correspondente da camada. - Lock/Unlock All Layers: cria uma trava na(s) camada(s), impedindo que os seus objetos sejam modificados (movidos, deletados, selecionados). - Show All Layers as Outlines: possibilita esconder a visualizao dos preenchimentos e contornos do objeto, deixando-os visveis apenas atravs de uma fina borda colorida. uma alternativa a opo de ocultar completamente a camada, uma vez que com essa opo no perdemos a noo do local e tamanho do objeto. Ao selecionar uma camada, observe a presena de um pequeno lpis, indicando que a camada ativa a ser editada. Ao bloquear a camada, um risco vermelho aparece sobre o lpis, determinando que aquela camada no pode ser editada por encontrar-se extremamente importante desenvolvermos o costume de sempre atribuir nomes s camadas criadas, uma vez que esse procedimento

bloqueada.

36


otimiza a busca de objetos. Para nomear ou renomear uma camada basta clicarmos duas vezes sobre seu nome e digitar o nome desejado. Para aplicar o nome s clicar em Enter. Para alterar a ordem das camadas, arraste uma ou mais camadas ou pastas na Linha do tempo at a posio desejada.

dIStrIbuIndo elementoS em uma CamadaQuando temos vrios obejtos no palco e queremos que cada animao acontea em um determinado tempo ou ao mesmo tempo organizamos cada objeto em uma camada. Por exemplo, textos em uma e forma em outra Se estes objetos estiverem na mesma camada ficamos restritos na animao que cada um pode ter. Tendo trs fomas em uma mesma camada, podemos selecionar todos e clicando com o boto direito do mouse selecionar a opo Distribute to layers (Modify > Timeline > Distribute to Layers).

Quando aplicamos o comando Distribute to Layers, a camada criada assume automaticamente o nome que atribumos ao elemento. Quando trabalhamos com textos e os distribumos em camadas, as camadas assumem os nomes dos textos.

Camada motIon guIdeDurante uma animao, muitas vezes queremos que nosso objeto no apenas se movimente entre um ponto e outro, mas tambm siga uma trajetria predefinida. Para anexar uma trajetria a uma animao, utilizaremos um tipo especial de layer do Flash chamada Motion Guide. 1- Crie um arquivo novo. 2- Selecione a camada e escolha a opo Add Classic Motion Guide. 3- Crie uma forma geomtrica no palco do Flash e transforme-a em um smbolo grfico, deixando-o na camada Layer 1. 4- Agora selecione a camada Guide: Layer 1 e faa uma traado com a ferramenta Pencil.37


5- Estenda as duas layers at o quadro 30. Aps o caminho da Motion Guide estar desenhado para o objeto realmente seguir essa trajetria, necessrio que tanto no primeiro quanto no ltimo quadro da animao o ponto central do objeto deve estar conectado a trajetria. 6- Posicione o ponto central objeto na trajetria tando no quadro e como no 30. 7- Clique entre os quadros na layer 1 e selecione Create Classic Tween. 8- Teste e veja como ficou sua animao. As camadas de guias no so exportadas nem exibidas em um arquivo SWF. Qualquer camada pode ser uma camada de guia. As camadas de guia so indicadas por um cone de guia, esquerda do nome da camada.

Ferramenta text toolEssa ferramenta utilizada para inserirmos textos no Flash. Existem duas opes para esta ferramenta: podemos clicar na rea que o bloco de texto deve iniciar e depois digitar ou podemos clicar na rea em que o bloco de texto deve iniciar e depois, mantendo o boto do mouse pressionado, arrastar at a rea final do bloco, criando uma rea predeterminada que o texto deve utilizar. Clicando na Text Tool podemos configurar o texto utilizando as configuraes disponveis no painel Properties.

O primeiro elemento a ser configurado o tipo de texto com as seguintes opes: - Static Text: texto simples que no aceita entrada nem alterao. - Dynamic Text: texto que podemos alterar por meio de ActionScript. - Input Text: caixa de entrada de texto. No painel Properties temos opes que podemos estar configurando para nosso texto.

38


Quando criamos um texto, podemos utilizar diferentes mtodos para renderiz-lo, escolhendo na opo Character em Anti-alias: - Use device fonts: faz com o que o filme procure no computador do usurio a fonte que escolhemos na rea Font (no incorpora a fonte no filme), deixando o filme com um tamanho menor. - Bitmap Text (No Anti-Alias): remove a opo de suavizao de serrilhado, acentuando o serrilhado da fonte. No recomendada para textos com fontes pequenas. - Anti-Alias for Animation: boa opo para textos envolvidos em animao, melhora a animao e suaviza o desenho. - Anti-Alias for Readability: deixa mais fcil a leitura dos textos, principalmente os que utilizam fontes menores. - Custom Anti-Alias: nesta opo podemos personalizar a suavizao de serrilhado. Quando escrevemos um texto no Flash exibido um identificador no canto do campo de texto para identificar o tipo de campo de texto: Para texto horizontal esttico que estende, um identificador redondo exibido no canto superior direito do campo de texto. Para texto horizontal esttico com largura fixa, um identificador quadrado exibido no canto superior direito do campo de texto. Para aumentar a caixa de texto, seleione-a e clique e arraste nas suas extremidades

tranSIo entre textoSPodemos usar a animao Shape para fazer a transio entre textos. Para termos uma animao Shape, precisamos ter uma forma desenhada na tela ou um texto (tipo static) que no seja editvel. 1- Crie um novo documento. 2- Escreva: Adobe Flash com a opo de texto esttico. 3- Selecione o texto e utilize a opo: Modify > Break Apart

39


Esta opo separa o texto, deixando cada letra independente, porm ainda editvel. 4- Selecione todas as letras e aplique novamente o comando: Modify > Break Apart, que agora sim vai convert-las em formas (shapes). 5- Insira um quadro vazio (Blank Keyframe) no quadro 30 e digite o texto: Nova verso. 6- Repita os mesmos procedimentos adotados no primeiro texto. 7- Selecione qualquer quadro entre o primeiro e o penltimo e aplique uma animao Shape. Pronto, s testar o resultado. Se achar necessrio pode utilizar as Shape Hints.

ImPortando mdIaSApesar de o Flash possuir suas prprias ferramentas para desenho, em alguns casos queremos importar nossa arte vetorial, feita em outro software, e manipular a mesma dentro do Flash. Tambm, podemos importar arquivos bitmaps para ilustrar nosso projeto e ainda obter efeitos bastante interessantes dentro do programa. 1- Abra o arquivo index.fla na pasta da lio. 2- Clique no menu: File > Import > Import to Stage e selecione a logo_alfa_sports.png que esta na pasta imagens. 3- Posicione a imagem no layout do nosso Hotsite, deixando-a em uma camada separada.

Nossa imagem j esta na Biblioteca. 3- Para melhorar a qualidade de nossa imagem, selecione-a na Biblioteca e clique no boto Properties na parte inferior deste painel.

40


4- Na janela Bitmap Properties marque a opo Allow smoothing e escola Lossless na opo Compression.

- Photo (JPEG): se possuirmos uma imagem com grande quantidade de cores e tonalidades, devemos usar esta opo. - Lossless (PNG/GIF): se no quisermos que algumas informaes de cor e tonalidade sejam descartadas da imagem, devemos usar esta opo. Ideal para imagens que no possuem uma quantidade de cores muito grande. Com estas alteraes a qualidade de nosso arquivo j esta melhor. O Flash pode importar imagens estticas em diversos formatos, mas geralmente usado o formato nativo do Photoshop, o PSD, para importar imagens estticas do Photoshop para o Flash. Ao importar um arquivo PSD, o Flash capaz de preservar muitos dos atributos aplicados no Photoshop, fornecendo opes para manter a fidelidade visual da imagem e para modific-la. O Flash funciona internamente com as cores dos espaos de cores RGB ou HSB (matiz, saturao e brilho). Embora o Flash possa converter imagens CMYK para RGB, aconselhvel criar arte-final no Photoshop em RGB. O Flash no pode importar Objetos Smart do Photoshop como objetos editveis. Para preservar os atributos visuais dos Objetos Smart, eles so rasterizados e importados para o Flash como bitmaps. 5- Selecione o arquivo tenis.psd que esta na pasta imagens.

laboratrIo: break aPart em bItmaPQuando aplicado o comando Break Apart em uma imagem ela convertida em um elemento vetorial comum, que poder receber cor e outros atributos. 1- Crie um novo arquivo. 2- Clique no menu: File > Import > Import to Library e selecione as imagens: paisagem. jpg e paisagem1.jpg que esto na pasta imagens na pasta da lio. 3- Arraste a imagem paisagem.jpg para o palco do Flash.41


4- Sem estar com a imagem selecionada, clique no boto Edit ao lado da opo Size no painel Properties e marque a opo: Contents. 5- Com a imagem selecionada escolha: Modify > Break Apart (CTRL + B) 6- Clique no frame 40 e selecione a opo: Insert Keyframe (F6) 7- Retorne ao frame 1, selecione a ferramenta Subselection Tool (seta branca) e clique nas extremidades da imagem. Veja que nossa imagem pode ser editada como se fosse uma forma Shape. 8- Clique na extremidade superior esquerda da imagem e arraste-a prxima ao canto inferior direito. 9- Agora aplique uma animao Shape e veja o resultado.

42

Unidade 6: Mscaras na Animao Usando Mscaras Efeitos de Preenchimento Mscara Arrstavel Mscara com Gradiente Criando Animaes com Filtros Laboratrio: Textos como Mscaras Laboratrio: Movimento com Mscaras


Unidade 6: Mscaras na Animao

uSando mSCaraSUma tcnica bastante usada em animao utiliza mscaras para obter o efeito de mostrar apenas parte da animao. Quando trabalhamos com mscaras, apenas as reas que definimos nelas sero mostradas no resultado final, no sendo visualizadas as outras reas do elemento mascarado. 1- Crie um novo documento e renomeie a layer inicial para mascarado. 2- Digite no palco o texto: Adobe Flash.

3- Clique com o boto direito do mouse no quadro 30 e escolha a opo Insert Frame (F5), com isso prolongamos a durao do texto na tela por 30 quadros. 4- Crie uma nova layer acima da layer mascarado e nomeie como mascara. 5- Na layer mascara desenhe um crculo que possua um tamanho um pouco maior que a altura do texto e torne-o um smbolo grfico posicionando-o um pouco esquerda do texto. 6- Na layer mascara pea um Create Motion Tween. 7- Posicione a cabea leitora no quadro final da layer mascara e desloque a forma para o lado direito do texto. Com isso temos o crculo passando sobre o texto de um lado para outro. Chegou hora de dizer para o Flash que somente a rea em que o crculo estiver passando deve ser mostrada na layer mascarado. 8- Selecione a layer mascara e clique com o boto direito do mouse sobre ela. Selecione a opo Mask. Com isso o efeito j esta pronto. Outra maneira de criar a mscara clicar com o boto direito do mouse sobre a layer mascara e escolher a opo Properties clicando na opo Mask.44


Podemos ver que agora os cones que representam as layers se alteraram, simbolizando uma mscara, e na layer mascarado aparece um smbolo prprio um pouco mais direita, mostrando que esta vinculado mscara. Para visualizar uma mscara no palco do Flash, as layers pertencentes a esse efeito estaro travadas, mas se destravarmos o cadeado, veremos novamente o crculo e o texto como estavam antes do efeito.

eFeItoS de PreenChImentoVamos ver um efeito de mscara para preencher um recipiente. Iremos desenhar uma forma com a ferramenta Pen. Para isso poderemos usar alguns comandos da opo: Modify > Shape: Straighten: acentua as retas da forma desenhada Smooth: acentua as curvas da linha. Optimize: abre uma janela para otimizar as curvas da linha Convert Lines to Fills: converte as linhas da forma em preenchimento. Expand Fill: expande o preenchimento da forma. Soften Fill Edges: deixa as bordas do preenchimento mais tnues. Outra opo, tambm, a opo de Combine Objects do menu Modify. 1- Desenhe uma forma com a ferramenta Pen, que contenha preenchimento e contorno, usando estes recursos, se necessrio. 2- Depois de pronta a forma, d um duplo clique na forma para entrar na sua edio. 3- D um duplo clique em cima do contorno do objeto para selecion-lo por completo e v at o menu: Edit > Cut. 4- Retorne para a Scene 1, clicando em seu respectivo cone. 5- Crie uma nova camada e nomeia para contorno

45


6- Para nos certificarmos que o preenchimento ocupar nessa camada a mesma posio que ocupava na camada anterior, escolha a opo: Edit > Paste in Place. Agora temos o contorno do objeto em uma camada e o preenchimento em outra. 7- Crie uma nova camada renomeando-a para animacao. Organize as camadas como na imagem. 8- Na camada animacao desenhe um retngulo e converta-o para um smbolo grfico, posicionando-o abaixo da forma. 9- Na layer animacao pea um Create Motion Twees e prolongue as outras layers, tambm. 10- Posicione a cabea leitora no quadro final da layer animacao, selecione o smbolo e aumente-o, usando a ferramenta Free Transform (pressione a tecla ALT e clique na extremidade), at que cubra completamente o objeto. 11- Clique com o boto direito do mouse sobre a camada objeto e escolha a opo: Mask. Agora basta testarmos a animaao.

mSCara arrStavelCom apenas dois simples comandos teremos uma mscara arrstavel. 1- Crie um novo documento. 2- Insira no palco do Flash a imagem: imagem.jpg que esta na pasta imagens dentro da pasta da lio. Transforme a imagem em um smbolo Movie Clip com o nome de instncia de foto. 3- Renomeie esta camada para mascarada. 4- Em seguida insira uma nova camada renomeando-a para mascara e desenhe uma Elipse. 5- Transforme esta forma em um Movie Clip com o ponto de registro no meio.

46


6- D o nome de instncia para este Movie Clip de bola. 7- Crie outra camada chamada acoes e em seu primeiro frame iremos colocar uma ao que far a mscara. Digite: this.foto.mask = bola; Com isso j criamos o efeito de mscara. 8- Para fazer o efeito de arrastar a forma (e, portanto a mscara) numa nova linha, ainda, no painel Actions digite: this.bola.startDrag (true); O mtodo startDrag() que faz com que a forma seja arrstavel. Teste seu filme e veja o efeito.

mSCara Com gradIenteVeremos um tipo de mscara diferente. Em vez de totalmente slida e visvel, vamos criar uma mascara que vai ter graduaes de visibilidade, que vai de totalmente visvel at, aos poucos, o invisvel. 1- Crie um novo documento 2- Importe para palco a imagem: paisagem1.jpg que esta na pasta da lio. 3- Torne a imagem um smbolo do tipo Movie Clip. 4- Prolongue (F5) esta camada at o frame 40. 5- Com a imagem selecionada, ajuste seu nome de instncia para imagem. Para que o efeito funcione corretamente deveremos marcar no painel Properties a opo: Cache as bitmap. 6- No painel Properties na opo Display marque a opo Cache as bitmap. Essa opo evita que o Flash tenha que redesenhar vetores complexos a toda a movimentao. Ele armazena como bitmap o elemento, melhorando significativamente a performance, pois poder ser redesenhado mais rapidamente. 7- Crie outra camada e renomei-a como mascara. Nesta nova camada desenhe um crculo.

47


8- Com a forma selecionada abra o painel Color (Window > Color). 9- Na rea Type escola o preenchimento radial e ajuste esse gradiente para que ele contenha trs quadrados com a mesma cor (tanto faz a cor escolhida): um no incio, um no meio e um no final.

10- Ajuste a ltima cor do gradiente (lado direito) para Alpha 0. Com isso a forma ser formada por um gradiente que se inicia na cor slida, e em seu final ser transparente. 11- Converta esta forma em um Movie Clip e d o nome de instncia para ela de bola. 12- Crie um Motion Tween para a layer que esta a bola e aumenta a mesma no quadro final. 13- Crie outra layer chamada acoese em seu primeiro frame coloque a ao que far a mscara: this.imagem.mask = bola; Teste o arquivo. Veremos que a mscara estar funcionando, entretanto estar totalmente slida, sem o efeito de gradiente que criamos. 14- Para que este efeito funcione marque no Painel Properties na opo Display o item Cache as Bitmap.

s testar.

48


CrIando anImaeS Com FIltroSOs filtros (efeitos grficos) do Flash permitem adicionar efeitos visuais interessantes ao texto, aos botes e clipes de filme. Um recurso exclusivo do Flash que podemos animar os filtros aplicados usando interpolaes de movimento. 1- Crie um novo arquivo. 2- Importe para o palco o arquivo xicara.png que esta na pasta imagens. 3- Transforme esta imagem em um smbolo Movie Clip. 4- Crie uma interpolao de movimento marcanco a opao Create Motion Tween. 5- Deixe a cabea leitora no primeiro quadro da camada e selecione o smbolo no palco. 5- No painel Properties na opo Filters, clique no boto Add filter na parte inferior e escolha o Filtro Blur. 6- Clique para desfocar a imagem.

- Blur X e Blur Y: refere-se a um embaamento aplicado no eixo X e Y da sombra. Quanto menor o valor mais slida a sombra, quanto maior o valor mais esfumaada. - Quality: definimos a qualidade do efeito entre os valores: baixa (Low), mdia (Medium) e alta (High). 7- Posicione a cabea leitora no quadro final da layer e ajuste o filtro Blur para 0. 8- Teste a animao. Existem outros filtros que podem ser aplicados a textos, tambm.

49


laboratrIo: textoS Como mSCaraS- Crie um novo arquivo. - Escreva um texto no palco no Flash. - Crie um nova camada e renomei-a para texto mask. - Crie outra camada e nomei-a para animacao. - Desenhe uma forma retangular na camada animacao e transforme-a em um smbolo grfico. - Pea uma interpolao de movimento na camada animacao. - Faa a forma passar sobre o texto entre seus quadros inicial e final. - Duplique o texto para a camada texto mask. - Pea a propriedade mask para a camada texto mask. Ao final nossas camadas estaro distribudas como na imagem. - Teste a animao e veja o efeito.

laboratrIo: movImento Com mSCaraS- Crie um novo arquivo. - Desenhe duas formas separadas no palco como shapes. - Importe para o palco umas das imagens que esta na pasta imagens. - Transforme esta imagem em um smbolo movie clip. - Pea uma interpolao de movimento na camada. - No quadro final faa a imagem se movimentar sobre as formas criadas, fazendo-a passar entre as formas. - Estenda a camada que contm as formas, tambm. - Posicione a camada que contm as formas acima da camada que esta animada. - Pea a propiedade mask para a camada das formas. - Teste a animao e veja o efeito.

50

Unidade 7: Cinemtica Inversa (IK) Cinemtica Inversa (IK) Adicionando Bones a Smbolos Adicionar Bones a Shapes Convertendo a Armadura em um Smbolo Padres com a Ferramenta Spray Brush Desenhando com a Deco Tool


Unidade 7: Cinemtica Inversa (IK)CInemtICa InverSa (Ik)Cinemtica inversa (IK) um mtodo de animao de um objeto ou de um conjunto de objetos em relao uns aos outros, usando uma estrutura articulada de bones. Os bones permitem que ocorrncias de smbolo e objetos Shape se movam de forma complexa e natural com o mnimo de esforo de desenvolvimento. Por exemplo, a cinemtica inversa permite criar animao de personagens, como braos, pernas e expresses faciais com muito mais facilidade. Uma cadeia de bones chamada de armadura. Os bones em uma armadura esto conectados uns aos outros em uma hierarquia pai-filho. A armadura pode ser linear ou ramificada. As ramificaes de uma armadura originadas no mesmo bone so chamadas de irmos. O ponto em que um bone se conecta a outro chamado de juno.

adICIonando boneS a SmboloSPodemos adicionar bones IK s ocorrncias de clipe de filme, grfico e boto. Para usarmos texto, primeiro convertamos o mesmo em smbolo. Tambm possvel separar o texto (Modify > Break) em formas distintas e usar bones com as formas individuais. 1- Crie um boneco usando formas geomtricas ou desenhando com uma das ferramentas. 2- Transforme cada parte do boneco em um smbolo Movie Clip.

3- No painel Ferramentas, selecione a ferramenta Bone. 4- Com a ferramenta Bone, clique no movie clip que deve ser a raiz ou a parte superior da armadura. Em seguida arraste-a para uma ocorrncia de smbolo separada para vincul-la ocorrncia de raiz.

52


Enquanto arrastamos, um bone exibido. Quando liberamos o mouse, um bone slido exibido entre as duas ocorrncias de smbolo. Cada bone tem uma parte superior, uma extremidade arredondada e uma parte inferior, a extremidade da ponta. 5- Para adicionar outro bone, arraste da parte inferior do primeiro bone para a prxima ocorrncia de smbolo que desejar adicionar armadura. Para selecionar um bone individual, clique no bone com a ferramenta Selection.

As propriedades do bone so exibidas no painel Properties

Conforme adicionamos bones aos smbolos, o Flash move cada smbolo para uma nova camada na Linha do tempo. A nova camada chamada de Armature. Por padro, os pontos de controle de uma forma esto conectados ao bone mais prximo deles. Quando selecionamso um bones com a ferramenta Selection, no painel Properties podemos definir a rotao deste bone. 6- Clique nos bones do boneco e faa alguns movimentos. 7 Com a ferramenta Selection, selecione um quadro em uma camada de pose contendo uma armadura. O Inspetor de propriedades exibe as propriedades da armadura. 8- No painel porperties, selecione Runtime, no menu Type. 9- Teste a animao e pressione o cursor do mouse em cima do boneco. Somente armaduras com uma nica pose podem ser controladas com o ActionScript.

53


Armaduras com mais de uma pose s podem ser controladas na Linha do tempo. Estes movimentos do boneco, agora com a opo Runtime, podem ser controlados por ActionScript.

A ferramenta Bind permite editar as conexes entre bones individuais e os pontos de controle da forma. Isso permite controlar a maneira como o traado distorcido durante o movimento de cada bone, a fim de obter resultados mais satisfatrios. Podemos ligar vrios pontos de controle a um bone e vrio bones a um ponto de controle. Clicar em um ponto de controle ou bone com a ferramenta Bind exibe as conexes entre os bones e os pontos de controle.

adICIonar boneS a ShaPeSUma segunda maneira de usar armaduras IK com os objetos Shape. Com formas, podemos adicionar vrios bones ao interior de uma nica forma. O que diferente dos smbolos, onde cada um s pode ter um bone. Podemos adicionar bones a uma nica forma ou a um grupo de formas. Nos dois casos, todas as formas devem ser selecionadas antes de adicionar o primeiro bone. 1- Crie uma forma Shape no palco. Podemos usar a ferramenta Brush. 2- Selecione a ferramenta Bone. 3- Com a ferramenta Bone, clique dentro da forma e arraste para outro local dentro da forma. 4- Para adicionar outro bone, arraste da parte inferior do primeiro bone para outro local dentro da forma. Ao final nossa forma estara semelhante a imagem.

54


As armaduras IK localizam-se nas camadas de pose na Linha do tempo. Para animar armaduras na Linha do tempo, insira poses clicando com o boto direito do mouse no quadro em uma camada de pose e selecionando Insert pose. 5- Na camada Armature clique com o boto direito do mouse no quadro 30 e escolha Insert Pose. 6- Nesta pose use a ferramenta Selection para alterar a configurao da armadura. O Flash interpola automaticamente as posies dos bones nos quadros entre poses. 7- Movimente os outros Bones com a Selection e v acrescentando Poses na linha de Tempo. 8- Teste a animao e veja como esta ficando. Se desejar alterar o comprimento da animao na Linha do tempo, arraste o ltimo quadro da camada de pose para a direita ou esquerda e adicione ou remova quadros. O Flash reposiciona os quadros de pose em proporo alterao de durao da camada e interpola novamente entre os quadros.

Convertendo a armadura em um SmboloPara aplicarmos efeitos interpolados a outras propriedades de objeto IK alm de posio do bone, o objeto deve ser delimitado em um clipe de filme ou smbolo grfico. 9- Selecione a armadura IK e todos os objetos a ela associados. 10- Converta-a em um Movie Clip. O Flash cria um smbolo com sua prpria Linha do tempo contendo a camada Armature. 11- Crie uma interpolo de movimento da Linha de Tempo. 12- Agora adicione efeitos de interpolao de movimento nova ocorrncia de smbolo no Palco.

55


Podemos aninhar smbolos contendo armaduras IK dentro de tantas camadas quantas forem necessrias de outros smbolos aninhados para criar o efeito desejado.

PadreS Com a Ferramenta SPray bruShA ferramenta Spray Brush age como um borrifador de partculas, permitindo que pincelemos um padro de formas no Palco de uma nica vez. Por padro, o Pincel de borrifar emite uma borrifada de partculas de pontos, usando a cor de preenchimento selecionada no momento. No entanto, podemos usar o Pincel de borrifar para aplicar clipe de filme ou smbolo grfico como um padro. 1- Crie um Movie Clipe atravs do menu Insert > New Symbol. 2- Desenhe uma estrela e crie uma interpolao de movimento para a mesma, de forma que ela pisque. 3- Retorne a Scene 1 4- Selecione a ferramenta Spray Brush. 5- No Inspetor de propriedades da ferramenta clique em Edit da opo Symbol para selecionar um smbolo personalizado na Biblioteca. Selecione a estrela.

6- Marque as opes do painel Properties semelhante a imagem.

Podemos usar qualquer clipe de filme ou smbolo grfico na Biblioteca como uma partcula. Essas partculas baseadas em smbolos oferecem um grande controle criativo sobre a arte criada no Flash. 7- Clique ou arraste no Palco onde deseja que o padro seja exibido.

8- Teste a animao.

56


deSenhando Com a deCo toolAs ferramentas de Desenho decorativo permitem que transformemos as formas grficas em padres geomtricos complexos. As ferramentas de Desenho decorativo usam clculos algortmicos conhecidos como modelagem procedural. Esses clculos so aplicados a um clipe de filme ou smbolo grfico que est na biblioteca. O efeito Vine Fill permite que preenchamos o Palco, um smbolo ou uma regio fechada com um padro de videira. Podemos substituir a sua prpria arte pelas folhas e flores, selecionando smbolos da biblioteca. O padro resultante fica contido em um clipe de filme que contm os smbolos que formam o padro. 1- Crie arquivo novo 2- Selecione a ferramenta Deco. 3- No painel Properties deixe marcado como na imagem.

4- Clique no palco com a ferramenta Deco. 5- Teste a animao.

Branch angle: especifica o ngulo do padro de ramificao. Patern scale: o dimensionamento de um objeto o reduz ou o amplia horizontalmente (ao longo do eixo x) e verticalmente (ao longo do eixo y). Segment Lenght: especifica a extenso dos segmentos entre os ns da folha e da flor. Animate Pattern: especifica que cada iterao do efeito seja desenhada em um novo quadro na linha de tempo. Esta opo cria uma seqncia animada quadro a quadro do padro de flor conforme ele desenhado.

57


Frame Step: especifica a quantidade de quadros a serem interpolados por segundo do efeito que est sendo desenhado.

58

Unidade 8: Criando Botes O Smbolo Boto Animando os Botes Personalizando o Cursor


Unidade 8: Criando Botes

o Smbolo botoCriar filmes interativos no Flash sinnimo de muito mais possibilidades de configurao de controles e realizao de tarefas de navegao com um visual diferenciado e melhor performance. Iremos ver como transformar e configurar um objeto simples em um elemento de navegao. 1- Abra o arquivo index.fla na pasta da lio. Para criarmos um boto, devemos proceder como se fssemos criar um smbolo qualquer. 2- Escreva os itens Produto , Dvidas e Compre J na parte superior do layout e em uma camada separada. 3- Use o painel Align, se necessrio para alinhar e distribuir os textos de forma uniforme.

4- Selecione a palavra Produto e converta-o em um smbolo (F8) s que agora ser do tipo Button, com o nome de produtoBtn. 5- Vamos clicar duas vezes em cima do smbolo boto (produtosBtn) para entrar em seu modo de edio. Observe que sua Timeline um pouco diferente das que vimos anteriormente, pois possui quatro estgios: UP, Over, Down, Hit. - UP: corresponde ao boto em seu estado normal, sem a proximidade do mouse; - Over: estgio em que o usurio passa o ponteiro do mouse sobre o boto; - Down: instante em que o usurio est clicando no boto;60


- Hit: a rea clicvel do boto, que no visualizada pelo usurio. 6- Vamos editar o boto. Insira um quadro (F6) em cada um dos estgios. 7- No estgio Over e no Down deixe o texto em tom de Laranja. 8- No estado Hit desenha um forma que cubra todo o texto do boto. 9- Repita estes procedimentos para os outros botes: Dvidas e Compre J. 10- Ao final, salve seu arquivo.

anImando oS boteSUm boto que se movimenta quando um usurio o pressiona ou simplesmente passa o ponteiro do mouse sobre ele gera um efeito bastante agradvel para o filme. Umas das maneiras de criarmos um boto animado colocar em um de seus estgios uma animao. Como j vimos o smbolo Movie Clip atende a este requisito, uma vez que sua Timeline totalmente independente. 1- Retorne ao arquivo index.fla e selecione o boto Produtos. 2- Clique duas vezes em cima do smbolo para entrarmos em sua edio. 3- Crie uma nova camada dentro deste smbolo. 4- No estgio Over desenhe um retangulo em cima da palavra e transforme-o em um smbolo Movie Clip. Agora estamos no Movie Clip dentro do smbolo produtoBtn.

5- Pea um Create Motion Tween e no ltimo quadro aumente-o at cobrir a palavra. 6- Crie um efeito de Alpha, tambm para o smbolo no seu quadro final 7- Crie uma nova camada e insira um quadro-chave em seu ltimo quadro colocando a action: stop(); Isso far que a animao pare quando chegar ao final.

61


Repare que quando entramos no estgio Over, iniciada a animao do Movie Clip. 8- Repita estes procedimentos para os outros botes.

9- Teste seu filme.

10- Instancie todos os botes para produtos, duvidas e compre, respectivamente.

PerSonalIzando o CurSor possvel personalizar o cursor do mouse do filme para utiliz-lo em animaes e apresentaes. Na realidade, no o cursor que vamos modificar, mas faremos um Movie Clip seguir o mouse e esconderemos o cursor para passar a iluso de que o Movie Clip de Filme o indicador do mouse. 1- Crie um novo arquivo. 2- Desenhe uma estrela e converta-a em um Movie Clip, deixando seu ponto de registro no centro. 3- D a esse Movie Clip o nome de instncia de cursor_mc. 4- Renomeie esta camada para mouse. 5- Insira uma nova camada com o nome de acoes 6- Na camada acoes selecione o primeiro quadro e abra o painel Actions (F9). Vamos inicialmente determinar que o Movie Clip ser arrastado. 7- Digite: cursor_mc.startDrag(true); Aqui determinamos que a instncia chamada cursor_mc ser arrastada (starDrag()) pelo ponto de registro (pelo parmetro true).

62


At aqui esta tudo OK, entretanto ainda aparece o cursor normal do sistema operacional. Vamos escond-lo com o mtodo hide( ) da classe Mouse. 8- Numa nova linha digite: Mouse.hide(); Teste o filme e veja a iluso de que o cursor o Movie Clip que criamos.

63


Anotaes:

64

Unidade 9: Introduo ao ActionScript Utilizando uma sintaxe de script adequada Viso Geral do Painel Action


Unidade 9: Introduo ao ActionScriptEmbora o ActioScript 3.0 possa parecer intimidador se somos iniciante em scripts, possvel obter excelentes resultados com alguns scripts muito simples. Como ocorre com qualquer linguagem, recomendvel parar um pouco para aprender a sua sintaxe e alguma terminologia bsica. Classe Uma classe uma categoria de objetos que compartilha os mesmos mtodos e propriedades, que podem ser alteradas pelo usurio. Exemplos de classes, por exemplo, co, gato. Propriedades Propriedades so as caractersticas de uma classe, que podem ser acessadas at modificadas via programao. Por exemplo, se Cachorro for uma classe, suas propriedades incluiro quatro patas, plo e uma cauda. Exemplos: meuBotao.label=texto; meuBotao.x=200; meuBotao.width=150; meuBotao.visible=false; Mtodos Um mtodo consiste na funo que um elemento desempenha. Por exemplo, dois mtodos associados com a classe MovieClip so: stop(); gotoAndPlay();

66


Parmetros Parmetros fornecem detalhes especficos e so valores entre parnteses ( ) em uma linha de cdigo. Por exemplo, no cdigo: gotoAndPlay (3); O parmetro instrui o script a ir para o frame 3. Funo Uma funo um grupo de instrues que pode ser referenciado pelo nome. Utilizando uma funo, possvel executar o mesmo conjunto de instrues sem digit-las repetidamente no mesmo script. Exemplo: function alerta():void { } Variveis Variveis funcionam como uma espcie de container que armazena informaes, seja um texto, um nmero, etc. Exemplo: var nome:String=Flash Temos uma varivel sendo declarada (ao var) cujo nome nome que receber (=) como valor o texto Flash.

utIlIzando uma SIntaxe de SCrIPt adeQuada O ponto-e-vrgula no final da linha instrui o ActionScript de que ele alcanou o final dessa linha de cdigo e que deve seguir para a prxima linha no cdigo; Cada parntese de abertura deve ter um parntese de fechamento correspondente, o mesmo vale para colchetes e chaves; O operador de ponto (.) fornece uma maneira de acessar as propriedades e os mtodos de um objeto;

67


Sempre que estivermos inserindo um nome de um arquivo, use aspas; Podemos adicionar comentrios que o ActionScript no ler, assim nos ou outras pessoas podem se lembrar do que esta sendo feito em diferentes partes do script. // comentrio de uma linha /* Comentrio de vrias linhas */ Para verificar a sintaxe de um script que estamos escrevendo, clique no cone AutoFormat (que tambm formatar o script de acordo com as convenes) ou clique no cone Check Syntax. Os erros de sintaxe so listados no painel Compiler Erros. O ActionScript uma linguagem case-sensitive, o que significa que os identificadores diferem em case (letras maisculas de minsculas). Abaixo, como exemplo duas variveis diferentes: var num1:int; var Num1:int;

vISo geral do PaInel aCtIonPara criar scripts incorporados em um arquivo FLA, informe o ActionScript diretamente no painel Action. Este painel consiste em trs painis: a caixa de ferramentas Aes, que agrupa elementos do ActionScript por categoria, o navegador de scripts, que permite mover rapidamente entre os scripts em seu documento Flash, e o painel Script, onde digitamos nosso cdigo ActionScript. Para habilitar este painel selecione Window> Action, ou pressione F9. As barras de ferramentas do painel Aes e da janela Script permitem que acessemos os recursos de assistncia de cdigo que ajudam a simplificar e dinamizar a codificao no

68


ActionScript. As ferramentas so diferentes dependendo se estamos usando o painel Aes ou a janela Script. Adicionar novo item ao script: exibe os elementos da linguagem que tambm esto na caixa de ferramentas de aes. Localizar: localiza e substitui texto no script. Inserir caminho de destino: ajuda na configurao do caminho de destino absoluto ou relativo para uma ao no script. Verificar sintaxe: verifica os erros de sintaxe no script atual. Os erros de sintaxe so listados no painel Sada. Formato automtico: formata seu script para uma sintaxe de codificao apropriada e uma legibilidade melhorada. Mostrar referncia de cdigo: se estiver desativada a referncia de cdigo automtica, use Mostrar referncia de cdigo para exibir uma referncia de cdigo para a linha de cdigo em que estiver trabalhando. Opes de depurao: prosseguir linha por define e remove pontos de interrupo para que possamos linha em nosso script ao executar uma depurao.

Contrair entre chaves: contrai o cdigo que aparece entre as chaves ou os parnteses que, atualmente, contm o ponto de insero. Contrair seleo: contrai o bloco de cdigo atualmente selecionado. Expandir tudo: expande todo o cdigo contrado no script atual. Aplicar comentrio em bloco: adiciona marcadores de comentrio no incio e no final do bloco de cdigo selecionado. Aplicar comentrio de linha: adiciona um marcador de comentrio de linha nica no ponto de insero, ou no incio de cada linha do cdigo em uma seleo multilinha. Remover comentrio: todas as linhas da remove os marcadores de comentrio da linha atual ou de seleo atual. exibe ou oculta a caixa de ferramentas de

Mostrar/ocultar caixa de ferramentas: aes. Assistncia de script: uma interface de usurio scripts.

no modo de Assistncia de script, somos apresentados a para insero dos elementos necessrios criao de

Ajuda: exibe as informaes de referncia para o elemento do ActionScript que est

69


selecionado no painel Script. Por exemplo, se clicarmos em um instruo import e, em seguida, clicar em Ajuda, as informaes de referncia para import aparecem no painel Ajuda. Menu do Action. painel: contm os comandos e as preferncias que se aplicam ao painel

70

Unidade 10: Navegao no Flash Carregando Arquivos Externos Navegao na Timeline Usando Label Criando Rolagem de Contedo Os Componentes no Flash


Unidade 10: Navegao no Flash

Carregando arQuIvoS externoSNas verses anteriores do Flash quando precisvamos usar uma imagem em nosso filme, ela deveria ter sido previamente importada para a biblioteca. Nas novas verses do Flash esse problema foi resolvido. Podemos importar uma imagem ou um arquivo swf no momento em que necessitamos deles, no sendo necessrio coloc-los na biblioteca. Isso ns ajuda muito uma vez que as imagens que no forem necessrias navegao, por exemplo, escolhida pelo usurio no sero carregadas sem necessidade. 1- Continuaremos no arquivo index.fla 2- Insira uma nova camada e d o nome de mcvazio. 3- Nessa camada desenhe um retngulo no centro da pgina de 430px de largura, que ser ocupada pelos contedos do hotsite.

4- Selecione esta forma e converta-a em um Movie Clip. 5- Coloque o nome de instncia deste Movie Clip de conteudo 6- D um duplo clique em cima deste Movie Clip para entrar em sua edio e delete o Shape. Isso far com que este Movie Clip fique vazio, servindo somente como alvo para carregar nossos arquivos externos. 7- Retorne para a cena principal Agora iremos criar nossos arquivos externos do mesmo tamanho (largura e altura) do Movie Clip vazio.72


8- Crie um novo documento com a cor cinza de fundo de 430px de largura por 310px de altura e salve-a como produtos.fla 9- Escreva o texto PRODUTOS na parte superior esquerda da tela. 10- Pressione CTRL + Enter para gerarmos o arquivo swf. 11- Repita esses procedimentos para criar os duvidas.fla e compre.fla 12- Crie um arquivo com as mesmas configuraes e salve como: home.fla Agora iremos comear a programar a navegao. 13- Crie uma nova camada e renomeia-a para acoes selecione o primeiro frame a habilite o painel Actions. Digite: var carregar:Loader=new Loader(); conteudo.addChild(carregar); Criamos a instncia Loader a partir da classe Loader do Action Script 3.0, que responsvel pelo carregamento de arquivos externos. 14- Aps digite: produtos.addEventListener(MouseEvent.CLICK,botao1); function botao1(evento:MouseEvent):void { carregar.load(new URLRequest(produtos.swf)); } Na primeira linha criamos um ouvinte para o boto (devidamente instanciado no palco do Flash) produtos que quando for clicado executa a funo botao1. A segunda linha contm a funo que executa o que se encontra entre as chaves. E na terceira linha temos a classe URLRequest, que responsvel por carregar nosso arquivo externo. 15- Logo aps digite: duvidas.addEventListener(MouseEvent.CLICK,botao2); function botao2(evento:MouseEvent):void { carregar.load(new URLRequest(duvidas.swf)); } compre.addEventListener(MouseEvent.CLICK,botao3);

73


function botao3(evento:MouseEvent):void { carregar.load(new URLRequest(compre.swf)); } home.addEventListener(MouseEvent.CLICK,botao4); function botao4(evento:MouseEvent):void { carregar.load(new URLRequest(home.swf)); } 16- Crie um boto personalizado para a opao Home e instancie-o para home. O restante da programao segue o mesmo esquema do anterior, s mudando a instncia de cada boto, que ao ser clicado, executar outra funo. E na classe URLRequest definido ou

Flash CS4

Documents

Transcript of Flash CS4