Topico 2

Colgio IDESA 2009 Web Design
Prof. Vitor Hugo Migoto de Gouva
ndice
Tpico 1 - Conhecendo a Ferramenta 1. Ferramentas, Agrupamento e Linha do Tempo 2. Painis e Scenes 3. Dando Movimento Objetos 4. Motion Tween a. Objetos e Textos b. Linha Guia c. Mscara de Objetos 5. Shape Tween a. Transformao de Texto usando Break Apart b. Referncia de Forma (Shape Hint) 6. Biblioteca 7. Criando Movie Clip 8. Criando Boto a. Up / Over / Down / Hit 9. Frame Lable (Rtulos) Tpico 2 - Action Script Sintaxe e Transio 1. Sintaxe a. b. c. d. Ponto ( . ) _root Chaves ( { } ) Ponto e vrgula ( ; ) e. f. g. Parnteses Maisculas e Minsculas Comentrios
2. Scripts de Transio a. b. c. gotoAndPlay(); gotoAndStop(); play(); d. e. f. stop(); nextFrame(); nextScene();
Tpico 3 - Trabalhando Action Script com Objetos 1. Eventos de Mouse a. press b. release c. releaseOutside d. rollOver e. rollOut f. dragOver g. dragOut
2. Alterando propriedades de Objetos Movieclips a. b. c. d. e. f. _visible _alpha _x _y _xscale _yscale g. h. i. j. k. l. _height _width _rotation _visible _xmouse _ymouse
3. Condio e Lao a. b. If do...while
4. Criando Cursores a. b. Mouse.hide() startDrag()
5. Random(); 6. Duplicando Objetos a. b. duplicateMovieClip setProperty
Tpico 4 - Alguns Efeitos Tpico 5 - Interao com Formulrios
Tpico 1 Conhecendo a Ferramenta
1. Ferramentas, Agrupamento e Linha do Tempo
Ferramentas
Seta (Selection) Transformao Livre (Free Transform) Linha (Line) Caneta (Pen) Circunferencia (Oval) Lpis (Pencil) Tinteiro (Ink Bottle) Conta Gotas (Eyedropper)
Subseleo (Subselection) Transformar Preenchimento (Fill Transform) Lao (Lasso) Texto (Text) Retngulo (Rectangle) e Polgono (Polystar) Pincel (Brush) Balde de Tinta (Paint Bucket) Apagador (Eraser)
Seta Utilizada para selecionar objetos: - Um clique seleciona a parte do objeto que est sendo clicado - Duplo clique seleciona todo o objeto (seu preenchimento e suas linhas) - SHIFT + Clique seleciona os objetos que forem clicados
- Encaixar - Suavizar - Acertar
- Para desenhar polgonos, quadrados, crculos perfeitos - Suaviza o contorno - Modifica os cantos do contorno
Transformao Livre Utilizada gerenciar transformaes em objetos
Girar e Inclinar Usada para Girar ou inclinar um objeto Distorcer Usada para distorcer um objeto selecionado Dimensionar Usada para redimensionar um objeto selecionado Envelopar Cria um efeito de envelope no objeto selecionado
Linha Usada para traar linhas Caneta Adiciona, remove ou movimenta os ns dos objetos Circunferncia Desenha crculos e elipses Lpis Desenha linhas mo livre
Acertar Desenha linhas com cantos retos Suavizar Desenha linhas com cantos circulares Tinta Desenha de forma livre mantendo os cantos de acordo
com o movimento feito pelo usurio. Tinteiro - Pinta os contornos dos objetos Conta Gotas Captura cores dos objetos Subseleo Edita os ns dos objetos
Transformar Preenchimento Transforma o preenchimento dos objetos Lao Seleciona parte dos objetos a mo livre
Vara Mgica Seleciona partes do objeto com mesma tonalidade Tipo de Polgono Seleciona partes do objeto em formas
poligonais Propriedades da Vara Mgica Configura a rea de abrangncia
da seleo da Vara Mgica Texto Insere textos Retngulo poligonos e Polgono Desenha retngulos, quadrados e
Raio do Retngulo Arredondado Define como sero os cantos
do retngulo ou quadrado Pincel - Desenha a mo livre com preenchimento
- Tipos de Pincel Define tipos de pincel
Pintar Normal Pinta normalmente Pintar preenchimentos Pinta somente preenchimentos Pintar atrs Pinta atrs dos objetos Pintar seleo pinta somente objetos selecionados Pinta Dentro - dentro dos objetos
- Tamanho do Pincel - Formato do Pincel - Bloquear Preenchimento Bloqueia o preenchimento do pincel
Balde de Tinta Usada para pintar o interior dos objetos
No fechar lacunas No fecha lacunas Fechar Lacunas Pequenas Fecha lacunas pequenas Fechar Lacunas Mdias Fechar lacunas mdias Fechar Lacunas Grandes Fecha lacunas grandes
Apagador Apaga objetos
Opes da Borracha
Apagar Normal Apagar Preenchimentos Apagar Linhas Apagar Preenchimentos Selecionados Apagar Dentro
Formatos da Borracha Define os formatos da borracha Apaga reas fechadas do preenchimento
Agrupamento
Uma das aes mais realizadas durante a criao de um projeto desenvolvido no Flash o agrupamento de objetos. Para que possamos agrupar dois objetos, necessrio selecionalos com a ferramenta seta, clicar no menu Modify e em seguida clicar na opo Group(Agrupar). Esta ao ir fazer com que os dois ou mais objetos fiquem agrupados como se fossem apenas um, com isso podemos movimentalos, ou efetuar outras aes sem precisar aplicar em cada objeto por vez.
Linha do tempo Uma das ferramentas mais usadas no Flash a linha do tempo tambm chamada de Timeline. A linha do tempo se encontra na parte superior da janela como podem ver na imagem abaixo.
Frame
A Timeline formada por pequenos quadros que chamamos de Frames. Nestes quadros onde faremos nossas imagens para que quando acionadas no flash elas tenham a aparncia de uma animao. Quando o modo de exibio acionado, cada frame exibido durante um determinado tempo em segundos, este intervalo pode ser alterado fazendo com que os frames sejam exibidos mais rpidos ou mais devagar, sendo que o default deste intervalo o tempo de 12 Frames por segundo ou 12 fps. Um conjunto de frames na linha de tempo pertence a uma Layer tambm chamada de camada. As layers servem para identificar um determinado conjunto de frames
na linha do tempo, tambm sendo utilizadas para definir a posio de cada animao. Um conjunto de layers podem ser agrupadas em uma pasta dentro do flash, para isso basta clicar no seguinte boto , posicionado logo
abaixo da janela de layers, e arrastar a layer para a pasta criada. Podemos tambm definir um titulo para uma layer a objetivo de facilitar a identificao das animaes para isso clique 2 vezes sobre o nome da Layer e quando ela for aberta para edio digite o nome de identificao definido por voc e aps isso clique em qualquer outro lugar da tela para manter o nome.
No exemplo acima trocamos o nome padro de Layer1 para Bot.
2. Painis e Cenas (Scenes) Podemos trabalhar uma animao usando diversas layers, porem em um momento fica desorganizado a quantidade de layers que temos em um projeto, para facilitar podemos criar o que chamamos de Scenes ou Cenas. Com isso ganhamos um espao novo na linha do tempo para inserirmos novas Layers sem se preocupar em se perder nas Layers de nossa primeira cena. Para criar uma nova Scene simples, basta clicar no menu Insert e em seguida em Scene, feito isso estaremos na nossa nova Cena pronto para trabalhar novas layers, para navegar entre as Scenas voc pode utilizar o boto localizado na parte superior do Timeline.
Ao lado direito do boto de cena podemos verificar a caixa que determina a porcentagem do Zoom da nossa rea de trabalho.
Aps
aprendermos
criar
uma
Scene,
como
fazemos
caso
necessitamos excluir a mesma? Simples, ao aprendermos a habilitar alguns painis as aes ficaro mais fceis, primeiramente vamos entender o que seriam estes painis ou panels. O Flash possui alguns painis com opes para que possamos alterar algumas propriedades dependendo do objeto, normalmente eles ficam nas laterais do programa ou em sua parte inferior e superior. Um dos primeiros painis que vamos aprender o Painel de Scene. Este painel ajudar a inserirmos, duplicarmos ou excluir cenas, para ativalo clique no menu superior Window, em seguida em Other Panels e depois em Scene. Aparecer ento o painel em sua rea de trabalho do flash, para agrupar os painis a lateral ou as partes inferiores e superiores simples, clique do lado esquerdo do titulo do painel e arraste ao local desejado.
Ao do movimento do painel, segurando ao lado esquerdo do titulo e arrastando ao lado (janela semitransparente a direita)
Como o painel de Scene teremos tambm outros painis importantes, um deles o painel de Properties & Filters. Neste painel podemos definir o tamanho (Size) da nossa rea de trabalho do flash, ou seja, a largura e altura da rea branca que temos no programa em que podemos desenhar. Podemos tambm neste painel arrumar algumas outras propriedades como a cor de fundo da nossa rea de trabalho e configurar o nmero de frames por segundo das animaes. Dentro do painel Filters ser permitido para alguns objetos que apliquemos tipos de filtros como aplicar sombras internas ou externas, embaamentos, entre outras opes. Outro painel que utilizaremos o de Actions este painel habilitar para ns uma rea para usarmos os cdigos de Action Script. Entre outros painis temos ainda os painis Color Mixer, Info & Transform e Library. Estes consecutivamente servem para selecionarmos cores ou aplicar efeitos de degrade, efetuar transformaes como inverter horizontalmente ou
verticalmente os objetos e o ultimo para selecionarmos clipes, botes ou imagens de uma biblioteca interna do flash. 3. Dando movimento a objetos Depois de aprendermos a utilizar algumas ferramentas e para que servem determinadas propriedades podemos seguir aprendendo a fazer uma movimentao simples de objetos. A animao no flash feita como se voc utilizasse um bloco de papeis, onde em cada folha existe um desenho e voc passa essas folhas numa determinada velocidade dando a caracterstica de animao ao desenho do papel. No flash as folhas de papeis so os nossos frames e o conjunto dos frames na linha do tempo far o papel do bloco de folhas. Agora vamos comear fazendo nossa primeira animao. Faremos um pequeno quadrado se movimentar para a frente. Siga os passos a seguir: 1 Clique no primeiro frame do Layer 1 e desenhe no canto inferior esquerdo da rea de trabalho um pequeno quadrado utilizando a ferramenta retngulo. 2 Clique com o boto direito do mouse em cima no segundo frame da Layer1 e crie um frame chave (Keyframe) clicando na opo Insert Keyframe.
3 Agora selecione o quadrado com a ferramenta seta e arraste-o alguns espaos para a direita. 4 - Clique com o boto direito do mouse em cima no terceiro frame da Layer1 e crie novamente um Keyframe. 5 Selecione novamente o quadrado com a ferramenta seta e arraste-o mais alguns espaos para a direita. 6 Agora no menu Control clique na opo Test movie, ou pressione as teclas CTRL + Enter, para visualizar o efeito da animao.
Feito isso voc perceber o quadro se movendo rapidamente e a animao se repetindo infinitamente. Este o mtodo mais simples de uma animao de movimento, porem o flash possui uma opo que nos ajuda a facilitar o processo de movimentao dos objetos, esta opo o que chamamos de Motion Tween, ou interpolao de movimento. 4. Motion Tween
4.a Objetos e Textos Como visto anteriormente aprendemos a fazer a movimentao de objetos de uma forma manual, o flash dispe para ns uma ferramenta que facilita esse trabalho, que o que vamos aprender a fazer. O motion tween faz a movimentao de objetos e textos apartir de 2 frames, um inicial onde ficar o objeto em sua primeira posio e outro final onde ficaro o objeto no local para onde voc quer moviment-lo. Ento vamos montar um exemplo seguindo os seguintes passos: 1 Crie um novo projeto clicando em File > New em seguida escolha Flash Document e clique em OK 2 Clique no frame 1 da Layer 1 e desenhe um quadrado no canto inferior esquerdo da rea de trabalho do flash. 3 - Clique com o boto direito no frame 15 da Layer 1 e clique Insert Keyframe 4 Ainda no frame 15 movimente o quadrado ao canto inferior direito da rea de trabalho do flash
5 Clique com o boto direito do mouse no frame 1 e em seguida em Create Motion Tween. Aperte CTRL + Enter para visualizar a animao.
Vendo a animao voc pode reparar que ele realiza o mesmo efeito que se eu tivesse andado o quadrado frame a frame manualmente. Analisando o resultado ento temos uma ferramenta bastante til em nossas mos. Para criar um motion tween com textos simples basta fazer o mesmo processo acima porem ao invs de criar um quadrado utilize a ferramenta de texto e crie seu texto na posio inicial, aps isso s seguir os mesmos passos citados acima. 4.b Linha Guia Usando o Motion Tween possvel tambm criar movimentao de um objeto em cima de uma linha como guia (Motion Guide). Para fazer isso simples porem antes precisamos aprender a converter objetos do flash em smbolos. Para realizarmos esta converso simples, 1- No objeto ou texto selecionado clique com o boto direito do mouse e escolha a opo Convert to Symbol 2 Logo depois aparecer uma janela para que voc digite um nome para este smbolo e escolha de qual tipo ele ser (Movie Clip, Graphic ou Button), aps escolher o tipo s clicar em OK
Os tipos de smbolos se resumem a estas aplicaes: Movie Clip Podemos transformar uma pequena animao de um objeto em um nico smbolo podendo utiliz-lo em outras animaes sem precisar recri-lo na mesma. Graphic - Neste smbolo podemos agrupar vrios objetos formando um s smbolo para trabalh-los em conjunto como um grfico ou imagem. Button Este tipo de smbolo faz com que o objeto selecionado ganhe propriedades de um boto.
Mas seguindo com nossa animao, vamos acompanhar os passos a seguir: 1 No primeiro frame da Layer 1 crie o objeto que voc deseja aplicar o movimento e converta-o para um smbolo do tipo Graphic. 2 Clique com o boto direito na layer 1 e clique em Add Motion Guide. 3 Ser adicionada ento uma nova layer chamada Guide:Layer 1, no frame 1 desta layer desenhe com o lpis a linha que o objeto dever seguir. 4 Clique sobre o Objeto na Layer 1 e arraste-o, pegando com a ferramenta seta pela bolinha branca de seu centro, at a ponta da linha que voc desenhou.
5 Agora na Layer 1 clique com o boto direito do mouse sobre o frame 35 e clique em Insert Keyframe, faa a mesma coisa na Guide:Layer1. 6 Estando no frame 35 posicione o Objeto da Layer 1 sobre o ponto final da linha desenhada arrastando-o pela bolinha branca de seu centro. 7 - Clique sobre o frame 1 da Layer 1 com o boto direito do mouse e clique em Create Motion Tween. 8 Pressione os botes CTRL + Enter para visualizar a animao.
Feito isso o Objeto criado seguir na animao a linha criada na Guide: Layer 1.
4.c Mascara de Objetos Outro efeito de interpolao de movimento que temos no flash a criao de Mascara, que o efeito de que se estivesse passando um holofote sobre um determinado objeto fazendo-o aparecer. Entendendo o efeito vamos colocar a mo na massa seguindo as instrues: 1 Digite o texto FLASH no frame 1 da Layer 1 com a ferramenta texto 2 Adicione uma nova Layer clicando em Insert > Timeline > Layer 3 Desenhe um circulo preto no frame 1 da layer 2, depois clique com o boto direito sobre a Layer 2 e clique em Mask 4 Clique nos cadeados que aparecero na frente das layers para desbloque-las. 5 Clique com o boto direito no frame 20 da layer 1 e clique em Insert Frame 6 Clique com o boto direito no frame 20 da layer 2 e clique em Insert Keyframe, arraste o circulo para a outra extremidade da rea de trabalho para que ele passe por cima do texto quando animado 7 No frame 1 da Layer 2 clique com o boto direito e clique em Create Motion Tween , aps isso pressione CTRL + Enter para visualizar a animao.
Voc dever ver o circulo passando sobre o texto fazendo-o aparecer como um efeito de holofote. Temos no flash alem dos efeitos de movimento outro efeito que a interpolao de formas, que veremos em nosso prximo capitulo.
5. Shape Tween Agora vamos aprender a utilizar outro efeito do flash que a interpolao de formas, com este efeito podemos fazer uma animao de transformao de uma forma e em outra. Vamos fazer um pequeno exemplo seguindo os passos a seguir: 1 No frame1 da layer1 faa um quadrado no canto esquerdo da rea de trabalho do flash. 2 No frame 30 da mesma layer clique com o boto direito e clique em Insert Blank Keyframe, assim ser inserido um quadro chave em branco. 3 Neste frame 30 desenhe um circulo no canto direito da rea de trabalho do flash 4 Clique sobre o frame1 e no painel de propriedades na caixa de Tween selecione a opo Shape, como mostra a imagem abaixo.
5 Pressione CTRL + Enter para visualizar a animao.
Na animao voc ver que o quadrado desenhado no primeiro frame ir se transformar no circulo feito no frame 30. Este foi um efeito simples de Shape mas podemos us-lo tambm para criar mais 2 tipos de efeitos: Transformaes de Texto usando Break Apart e a Referncia de Forma.
5.a Transformao de Texto usando Break Apart Quando trabalhamos com desenho simples de formas no flash muito fcil fazer o Shape Tween, mas e quando queremos fazer transformaes de texto? A idia transformar este texto em uma forma, para isso utilizaremos a ferramenta Break Apart (Quebrar em partes) que o Flash dispem para ns. Vamos fazer um exemplo simples para aprendermos a utilizar este efeito. 1 No frame 1 da Layer 1 digite a letra A usando a ferramenta de texto 2 Agora vamos fazer esta letra A ser desmembrada e deixar de ser um texto para se tornar um objeto com caractersticas de uma forma. Para isso clique sobre a letra A com o boto direito e clique na opo Break Apart. 3 Daqui para a frente como no primeiro exemplo, clique sobre o Frame 30 e insira uma Blank Keyframe. 4 Agora no Frame 30 digite a letra B usando a ferramenta texto e aplique sobre o B o Break Apart. 5 Clique no Frame 1 e no painel de propriedades na opo Tween selecione Shape. 6 Pressione CTRL + Enter e visualize a animao.
Se tudo der certo voc vai perceber que a letra A digitada no frame1 se transformar na letra B digitada no frame 30.
5.b Referncia de Forma Depois de fazermos a transformao de texto, voc pode ter reparado que durante a transio ocorreu uma deformao um pouco feia de um objeto para o outro. Para que possamos suavizar esta deformao utilizaremos esta tcnica de referencia de forma tambm chamada de Shape Hint. Vamos seguir os prximos passos e verificar o que acontece: 1 No frame 1 digite o numero 1 usando a ferramenta texto, logo aps aplique o Break Apart sobre o numero 1 digitado. 2 Insira um Blank Keyframe no frame 30. 3 No frame 30 digite o numero 2 usando a ferramenta texto e logo aps aplique o Break Apart. 4 Selecione o frame 1 e altere no painel de propriedades a opo Tween para Shape. 5 Agora comea a aplicao do Shape Hint, no frame 1 selecione o numero 1 que foi digitado, e aplique uma referencia de forma (Shape Hint) usando o menu Modify > Shape > Add Shape Hint ou pressione as teclas CTRL + SHIFT + H . Feito isso ir aparecer um ponto vermelho com uma letra dentro sobre a imagem, como voc pode ver na imagem a seguir.
6 Este ponto vermelho o que chamamos de Shape Hint, mova-o para o ponto mostrado na figura a seguir.
7 No frame 30 voc ver o mesmo ponto sobre a imagem do numero 2, arraste-o at o local indicado na imagem abaixo:
8 Volte ao frame 1 e adicione mais hints usando o atalho CTRL + SHIFT + H e posicione-os como a seguir, nos frames 1 e 30:
9 Agora pressione CTRL + Enter e visualize a animao.
Depois de visualizar sua animao vai notar que os Shape Hints criados fizeram com que os pontos escolhidos no numero 1 fossem movimentados at os pontos referenciados no numero 2 fazendo com que a deformao da animao fosse suavizada.
6. Biblioteca Depois que conhecer e aprender como montar algumas animaes no flash ,vamos conhecer uma ferramenta que nos ajudar a localizar alguns objetos criados em nossas animaes. O Painel de Biblioteca, acionado pelo atalho F11, armazena todos os smbolos que criamos durante o nosso projeto. Podemos utilizar este painel para renomear smbolos, editar, duplicar, excluir, mover e etc. Veja a seguir uma imagem do Painel de biblioteca que tambm pode ser acionado atravs do menu Window > Library.
7. Criando Movie Clip Um Movie Clip uma pequena animao simplificada a um objeto. Com o movie clip podemos adicionar ao nosso projeto da animao varias animaes desligadas da linha do tempo principal, ou seja, enquanto temos nossa animao principal, dentro dela podemos ter objetos animados sem que seja preciso ajust-los a nossa linha do tempo do projeto principal. Para criarmos um movie clip fcil, adicione o primeiro objeto que voc pretende fazer como pequena animao, aps clique nele com o boto direito do mouse, clique na opo Convert to Symbol, voc pode nomear este smbolo para poder identific-lo, selecione a opo Movie Clip e clique em OK.
Aps converter o objeto para Movie Clip d dois cliques sobre o objeto, quando o fizer voc perceber que voc ter uma nova linha do tempo para este objeto, onde voc pode criar novas Layers, inserir frames, fazer animaes, aps fazer as animaes d dois cliques fora da rea de trabalho do flash ou aperte em Scene 1 na parte superior ao Timeline.
Voltando ao Scene 1 voc poder continuar seu projeto normalmente, e quando execut-lo ver que o movie clip executar juntamente com a animao.
8. Criando Boto No flash como vimos at agora temos a opo de criar uma animao pequena fazendo-a rodar dentro de nossa animao principal atravs do movie clip. Da mesma maneira como o flash nos permite isso ele tambm permite que criemos botes com efeitos animados para serem utilizados em animaes ou clipes para execuo de determinadas aes. Para criar um boto simples, adicione o objeto que voc deseja ter como um boto, aps, clique com o boto direito do mouse sobre ele e escolha a opo Convert to Symbol, na janela que aparecer d um nome ao seu objeto e selecione a opo Button. Seu boto foi criado, agora precisamos aprender a utilizar suas opes de eventos, para isso comece dando dois cliques sobre seu objeto. 8.a Up / Over / Down / Hit Depois que o objeto clicado duplamente, voc ver na linha do tempo 4 opes como se fossem frames que so: UP , Over, Down e Hit. Estas opes fazem referencia a um evento do boto. Vamos ver quais as caractersticas delas: UP a primeira aparncia do boto, est ser a primeira aparncia mostrada para o usurio. Over Ser a aparncia de quando o mouse do usurio passar sobre o boto, ou seja, quando o mouse for posicionado sobre o boto ele ter uma nova aparncia que definida nesta opo. Down- a aparncia do boto quando clicado pelo usurio, ou seja, quando o usurio efetuar um clique sobre o boto a sua aparncia ser a definida neste frame. Hit Esta opo define a rea de clique do boto, ou seja, voc definir qual a rea dentro do objeto criado onde o boto poder ser acionado, por exemplo, voc poder permitir que um boto que representado por um desenho de quadrado apenas poder ser clicado em sua parte de baixo ao invs de poder ser clicado em toda a rea do quadrado.
Usando esta tcnica juntamente com a tcnica do movie clip podemos criar botes animados, fazendo com que nosso projeto seja dinmico. Para criar ento cada uma das opes do objeto Button s voc trabalhar com estas 4 opes como se fosse frames normais de uma timeline, ou seja, se voc quer fazer a imagem de como o boto ficar quando clicado s clicar com o boto direito do mouse no frame Down e mandar adicionar uma Blank Keyframe ou ento criar uma Keyframe. Aps criada os eventos dos botes para retornar a rea principal do projeto voc pode dar um duplo clique na parte de fora da rea de trabalho do flash ou clicar no link Scene 1 acima da linha do tempo. 9. Frame Labels ( Rtulos) Agora vamos aprender a utilizar um rtulo para apelidar nossos frames. Voc deve se perguntar, para que eu precisarei disso? Ns utilizamos os frame labels para identificarmos as frames chaves para que possamos nos manter organizados e para evitarmos futuras dificuldades em encontrar determinados pontos em nosso projeto, onde este pode conter inmeras Layers e Frames. A utilizao do Frame Label tambm serve de apoio na utilizao do Action Script de transio que aprenderemos logo mais, usando estes apelidos para nossos frames chaves podemos ir at estes pontos identificados atravs de um cdigo especifico, facilitando assim que no tenhamos a necessidade de decorar qual o numero do Frame que eu executava determinada animao. Para ento apelidarmos nossos frames temos de fazer os seguintes passos: Depois de criado um quadro chave (Keyframe) clicamos uma vez em cima dele na linha do tempo para que ele seja selecionado. Aps vamos at o painel Properties e logo abaixo onde esta escrito Frame veremos uma caixa com o seguinte contedo <Frame Label> , clique dentro desta caixa, o contedo ser apagado automaticamente e ali voc poder definir o nome do apelido que ser dado quele quadro chave.
Ao definir o nome do rtulo este nome aparecer tambm, em sua timeline como a imagem a seguir:
Para evitar problemas, nomeie sempre os Frame Labels com letras sem acentuao e nmeros, sem espaos em branco, caso necessite utilizar espaos para fazer uma separao, utilize ao invs disto um caractere underline ( _ ).
Tpico 2 Action Script Sintaxe e Transio
1. Sintaxe O Action Script assim como demais linguagens de programao possuem um modelo padro de regras para ser escrito, este modelo de regras o que chamamos da sintaxe. Na lngua portuguesa, por exemplo, o ponto final serve para determinar o fim de uma frase no action script o ponto e vrgula determina o fim de uma linha de programao. Vamos ver a seguir algumas sintaxes do Action Script. 1.a Ponto ( . ) O caractere ponto ( . ) no action script serve para indicar uma propriedade, mtodo ou uma funo de um determinado objeto. Veja o exemplo: nome_do_objeto._x = 30; No exemplo definimos atravs do ponto a propriedade _x que relacionada a posio do eixo X do objeto nome_do_objeto. 1.b _root A instancia _root faz referncia a linha do tempo principal, se voc estiver dentro de um movieclip e precisar fazer referencia a alguma propriedade que est dentro da linha do tempo principal utiliza-se ento a instancia _root. _root.nome_do_objeto._x = 20; No exemplo acima fazemos referencia a propriedade _x do objeto nome_do_objeto que est localizado na linha do tempo principal.
1.c Chaves ( { } ) No action script as chaves servem para agrupar blocos de comandos, normalmente utilizados em laos, condies, funes ou eventos. Por exemplo: on(release){ nome_do_objeto._x = 15; } Vendo o exemplo acima voc pode perceber que delimitamos o comando nome_do_objeto._x=15 dentro de um evento chamado on(release) e para realizar isso usamos as chaves para dizer onde comea e onde termina este evento. Para entendermos melhor veja o exemplo abaixo: on(release){ nome_do_objeto._x = 15; } nome_do_objeto2._y=45; Acompanhando este exemplo voc pode perceber que o comanhdo nome_do_objeto2._y=45 no pertence ao evento on(release), ou seja, este comando ser executado quando o frame for carregado independente se o evento ocorreu ou no. 1.d Ponto e vrgula ( ; ) O ponto e vrgula como citado no exemplo inicial deste tpico ele tem como funo definir o final de uma linha de comando. Precisamos prestar muita ateno, pois em alguns casos no devemos utilizar o ponto e virgula como quando finalizamos com chaves( }) depois de iniciarmos uma funo ou evento e demais casos que veremos no seguir das situaes. Vejamos um exemplo de seu uso. On(release){ Nome_do_objeto._y = 34 ; Nome_do_objeto._x = 35 ; } Voc repara que ao terminarmos as linhas de comandos colocamos sempre o ; ( ponto e vrgula) para finalizar, vemos tambm que depois das chaves de inicio e fim do evento no fazemos o uso do mesmo.
1.e Parnteses ( () ) Os parnteses servem para definirmos argumentos dentro de funes ou eventos como por exemplo: On(release){ Nome_do_objeto._x = 32; } Podemos ver que dentro dos parenteses do evento On, que se refere a quando um boto acionado, temos o argumento release que define que os comandos delimitados ao seguir do evento ocorrero quando o boto for solto. 1.f Maisculas e Minsculas No action script as letras maisculas e minsculas so diferenciadas em comandos, nomes de objetos, funes, eventos e etc. Veja o exemplo: nome._alpha=25; NOME._alpha=25; Imagine que voc possui um objeto movieclip que contem o nome nome, verificando acima somente ir funcionar para este objeto o primeiro comando. 1.g Comentrios Bons programadores tem como rotina adicionar comentrios em suas programaes, estes so timos para que futuras pessoas que vejam a programao possam entender o que acontece em cada linha programadas. Para adicionarmos comentrios na programao Action Script usamos duas barras ( // ) e aps isso escrevemos o comentrio. Os comentrios que estiverem dentro da linha iniciada por duas barras no sero executadas.
2. Scripts de Transio Ao trabalharmos com os movie clips e buttons vemo-nos na necessidade de criar algumas aes interativas em nossas animaes. Vamos aprender neste tpico a aplicar algumas aes de transio de Frames e Scenas em nossos botes. Antes de comearmos precisamos entender que algumas destas aes sero sempre colocadas no evento on(release){} do boto, este evento executado quando existe o clique no boto.
on(release){ funes de transio; } A seguir vamos conhecer os comandos mais comuns para trabalho de transio. 2.a gotoAndPlay(); Este comando de transio serve para rodar a animao a partir do frame de uma cena. Sua sintaxe usada da seguinte forma: on(release){ gotoAndPlay(Nome da Cena, numero do frame); }
Exemplo: on(release){ gotoAndPlay(Scene 2, 15); }
2.b gotoAndStop(); Este comando de transio, diferente do anterior, encaminha a animao at o ponto determinado e para a animao neste ponto. Sua sintaxe a seguinte: on(release){ gotoAndStop(Nome da Cena, numero do frame); }
Exemplo:
on(release){ gotoAndStop(Scene 4, 10); }
2.c play(); Esta funo faz com que a animao quando parada seja executada a partir do ponto onde foi colocada. Veja sua sintaxe: on(release){ play(); }
2.d stop(); Esta funo, ao inverso da anterior, faz com que a animao seja pausada no ponto em que utilizada. Veja sua sintaxe: stop(); Esta funo normalmente usada nos frames (ou seja, diferente de outras funes que so usadas nos botes, mas ela tambm pode ser usada em um boto) para parar as animaes em um determinado ponto. on(release){ stop(); }
2.e nextFrame(); Esta funo faz com que a animao caminhe e pare no prximo keyframe criado na timeline. Sua sintaxe a seguinte: on(release){ nextFrame(); } 2.f nextScene(); Esta funo faz com que a animao caminhe e pare no primeiro frame da prxima cena. Ela usada da seguinte forma: on(release){ nextScene(); }
Tpico 3 Trabalhando Action Script com Objetos

Com a utilizao de Action Script podemos interagir com objetos como Movie Clips, Graphics, Buttons e trabalhar eventos e aes determinadas pelo usurio. 1. Eventos de Mouse Toda ao que o usurio realiza no computador reconhecida como um evento. Neste sub-tpico vamos abordar alguns eventos relacionados ao uso do mouse. Por exemplo, o uso do clique do mouse em um boto um evento, voc passar o mouse sobre um objeto tambm um evento assim como voc clicar e arrastar um boto ou movie clip, todos estes eventos so reconhecidos pela funo on(). Vejamos a seguir como funcionam alguns destes eventos e seus devidos cdigos de utilizao. 1.a Press O evento press realiza uma ao logo quando o boto do mouse clicado. Quando o usurio realiza a ao de apertar o boto esquerdo do mouse a ao j executada. Sua sintaxe a seguinte:
on(press){ Ao; } 1.b Release O evento release realiza uma ao quando ocorre o
pressionamento do boto do mouse, ou seja, quando o usurio pressiona o boto esquerdo e em seguida solta o dedo do mesmo assim realizando o evento. Sua sintaxe a seguinte:
on(release){ Ao; }
1.c ReleaseOutside O evento releaseOutside realiza uma ao quando ocorre o pressionamento e o soltar do boto fora do objeto clicado, ou seja, o usurio mantem o boto pressionado e arrasta o mouse para fora do objeto sem soltar o boto, quando o mouse esta posicionado fora do objeto o usurio solta o boto do mouse e a ao acontece.Sua sintaxe a seguinte:
on(releaseOutside){ Ao; } 1.d RollOver O evento rollOver realiza uma ao quando o mouse posicionado em cima do objeto, ou seja, quando o mouse passa sobre o objeto a ao acontece. Sua sintaxe a seguinte: on(rollOver){ Ao; } 1.e RollOut O evento rollOut realiza uma ao quando o mouse posicionado e retirado do objeto, ou seja, o usurio posiciona o mouse sobre o objeto e quando o mouse sai fora da rea de ao do objeto a ao acontece. Sua sintaxe a seguinte: on(rollOut){ Ao; }
1.f DragOver O evento dragOver realiza uma ao quando o mouse pressionado sobre o objeto, sem soltar o boto ele arrastado para fora e retorna ao objeto. Sua sintaxe a seguinte:
on(dragOver){ Ao; } 1.g DragOut O evento dragOut realiza uma ao quando o mouse pressionado sobre o objeto e sem soltar o boto ele arrastado para fora. Sua sintaxe a seguinte: on(dragOut){ Ao; }

Topico 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Topico 2

Enviado por

Direitos autorais:

Formatos disponíveis

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

2. Scripts de Transio a. b. c. gotoAndPlay(); gotoAndStop(); play(); d. e. f. stop(); nextFrame(); nextScene();

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

3. Condio e Lao a. b. If do...while

4. Criando Cursores a. b. Mouse.hide() startDrag()

5. Random(); 6. Duplicando Objetos a. b. duplicateMovieClip setProperty

Tpico 4 - Alguns Efeitos Tpico 5 - Interao com Formulrios

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Tpico 1 Conhecendo a Ferramenta

1. Ferramentas, Agrupamento e Linha do Tempo

- Encaixar - Suavizar - Acertar

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Transformao Livre Utilizada gerenciar transformaes em objetos

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

poligonais Propriedades da Vara Mgica Configura a rea de abrangncia

Raio do Retngulo Arredondado Define como sero os cantos

do retngulo ou quadrado Pincel - Desenha a mo livre com preenchimento

- Tipos de Pincel Define tipos de pincel

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

- Tamanho do Pincel - Formato do Pincel - Bloquear Preenchimento Bloqueia o preenchimento do pincel

Balde de Tinta Usada para pintar o interior dos objetos

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Apagador Apaga objetos

Formatos da Borracha Define os formatos da borracha Apaga reas fechadas do preenchimento

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Colgio IDESA 2009 Web Design

No exemplo acima trocamos o nome padro de Layer1 para Bot.

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

5 Pressione CTRL + Enter para visualizar a animao.

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

Prof. Vitor Hugo Migoto de Gouva

Colgio IDESA 2009 Web Design

9 Agora pressione CTRL + Enter e visualize a animao.

Prof. Vitor Hugo Migoto de Gouva