Colégio IDESA 2009 Web Design

Transcrição

1

2 Índice Tópico 1 - Conhecendo a Ferramenta 1. Ferramentas, Agrupamento e Linha do Tempo 2. Painéis e Scenes 3. Dando Movimento à Objetos 4. Motion Tween a. Objetos e Textos b. Linha Guia c. Máscara de Objetos 5. Shape Tween a. Transformação de Texto usando Break Apart b. Referência de Forma (Shape Hint) 6. Biblioteca 7. Criando Movie Clip 8. Criando Botão a. Up / Over / Down / Hit 9. Frame Lable (Rótulos) Tópico 2 - Action Script Sintaxe e Transição 1. Sintaxe a. Ponto (. ) b. _root c. Chaves ( { ) d. Ponto e vírgula ( ; ) e. Parênteses f. Maiúsculas e Minúsculas g. Comentários

3 2. Scripts de Transição a. gotoandplay( ); b. gotoandstop( ); c. play(); d. stop(); e. nextframe(); f. nextscene(); Tópico 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. _visible b. _alpha c. _x d. _y e. _xscale f. _yscale g. _height h. _width i. _rotation j. _visible k. _xmouse l. _ymouse

4 3. Condição e Laço a. If b. do...while 4. Criando Cursores a. Mouse.hide() b. startdrag() 5. Random(); 6. Duplicando Objetos a. duplicatemovieclip b. setproperty Tópico 4 - Alguns Efeitos Tópico 5 - Interação com Formulários

5 Tópico 1 Conhecendo a Ferramenta 1. Ferramentas, Agrupamento e Linha do Tempo Ferramentas Seta (Selection) Transformação Livre (Free Transform) Linha (Line) Caneta (Pen) Circunferencia (Oval) Lápis (Pencil) Tinteiro (Ink Bottle) Conta Gotas (Eyedropper) Subseleção (Subselection) Transformar Preenchimento (Fill Transform) Laço (Lasso) Texto (Text) Retângulo (Rectangle) e Polígono (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 - Para desenhar polígonos, quadrados, círculos perfeitos - Suavizar - Suaviza o contorno - Acertar - Modifica os cantos do contorno

6 Transformação Livre Utilizada gerenciar transformações 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 traçar linhas Caneta Adiciona, remove ou movimenta os nós dos objetos Circunferência Desenha círculos e elipses Lápis Desenha linhas à mão 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 usuário. Tinteiro - Pinta os contornos dos objetos Conta Gotas Captura cores dos objetos Subseleção Edita os nós dos objetos

7 Transformar Preenchimento Transforma o preenchimento dos objetos Laço Seleciona parte dos objetos a mão livre - Vara Mágica Seleciona partes do objeto com mesma tonalidade - Tipo de Polígono Seleciona partes do objeto em formas poligonais - Propriedades da Vara Mágica Configura a área de abrangência da seleção da Vara Mágica Texto Insere textos Retângulo e Polígono Desenha retângulos, quadrados e poligonos - Raio do Retângulo Arredondado Define como serão os cantos do retângulo ou quadrado Pincel - Desenha a mão livre com preenchimento - Tipos de Pincel Define tipos de pincel

8 - Pintar Normal Pinta normalmente - Pintar preenchimentos Pinta somente preenchimentos - Pintar atrás Pinta atrás dos objetos - Pintar seleção 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 - Não fechar lacunas Não fecha lacunas - Fechar Lacunas Pequenas Fecha lacunas pequenas - Fechar Lacunas Médias Fechar lacunas médias - Fechar Lacunas Grandes Fecha lacunas grandes

9 Apagador Apaga objetos Opções 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

10 Agrupamento Uma das ações mais realizadas durante a criação de um projeto desenvolvido no Flash é o agrupamento de objetos. Para que possamos agrupar dois objetos, é necessário selecionalos com a ferramenta seta, clicar no menu Modify e em seguida clicar na opção Group(Agrupar). Esta ação irá fazer com que os dois ou mais objetos fiquem agrupados como se fossem apenas um, com isso podemos movimentalos, ou efetuar outras ações sem precisar aplicar em cada objeto por vez. Linha do tempo Uma das ferramentas mais usadas no Flash é a linha do tempo também 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 aparência de uma animação. Quando o modo de exibição é acionado, cada frame é exibido durante um determinado tempo em segundos, este intervalo pode ser alterado fazendo com que os frames sejam exibidos mais rápidos 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 também chamada de camada. As layers servem para identificar um determinado conjunto de frames

11 na linha do tempo, também sendo utilizadas para definir a posição de cada animação. Um conjunto de layers podem ser agrupadas em uma pasta dentro do flash, para isso basta clicar no seguinte botão, posicionado logo abaixo da janela de layers, e arrastar a layer para a pasta criada. Podemos também definir um titulo para uma layer a objetivo de facilitar a identificação das animações para isso clique 2 vezes sobre o nome da Layer e quando ela for aberta para edição digite o nome de identificação definido por você e após isso clique em qualquer outro lugar da tela para manter o nome. No exemplo acima trocamos o nome padrão de Layer1 para Bot. 2. Painéis e Cenas (Scenes) Podemos trabalhar uma animação 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 espaço 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 botão localizado na parte superior do Timeline. Ao lado direito do botão de cena podemos verificar a caixa que determina a porcentagem do Zoom da nossa área de trabalho.

12 Após aprendermos a criar uma Scene, como fazemos caso necessitamos excluir a mesma? Simples, ao aprendermos a habilitar alguns painéis as ações ficarão mais fáceis, primeiramente vamos entender o que seriam estes painéis ou panels. O Flash possui alguns painéis com opções 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 painéis 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á então o painel em sua área de trabalho do flash, para agrupar os painéis a lateral ou as partes inferiores e superiores é simples, clique do lado esquerdo do titulo do painel e arraste ao local desejado. Ação do movimento do painel, segurando ao lado esquerdo do titulo e arrastando ao lado (janela semitransparente a direita)

13 Como o painel de Scene teremos também outros painéis 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 também neste painel arrumar algumas outras propriedades como a cor de fundo da nossa área de trabalho e configurar o número de frames por segundo das animações. Dentro do painel Filters será permitido para alguns objetos que apliquemos tipos de filtros como aplicar sombras internas ou externas, embaçamentos, entre outras opções. Outro painel que utilizaremos é o de Actions este painel habilitará para nós uma área para usarmos os códigos de Action Script. Entre outros painéis temos ainda os painéis Color Mixer, Info & Transform e Library. Estes consecutivamente servem para selecionarmos cores ou aplicar efeitos de degrade, efetuar transformações como inverter horizontalmente ou verticalmente os objetos e o ultimo para selecionarmos clipes, botões 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 movimentação simples de objetos. A animação 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 característica de animação ao desenho do papel. No flash as folhas de papeis são os nossos frames e o conjunto dos frames na linha do tempo fará o papel do bloco de folhas. Agora vamos começar fazendo nossa primeira animação. 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 retângulo. 2 Clique com o botão direito do mouse em cima no segundo frame da Layer1 e crie um frame chave (Keyframe) clicando na opção Insert Keyframe.

14 3 Agora selecione o quadrado com a ferramenta seta e arraste-o alguns espaços para a direita. 4 - Clique com o botão 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 espaços para a direita. 6 Agora no menu Control clique na opção Test movie, ou pressione as teclas CTRL + Enter, para visualizar o efeito da animação. Feito isso você perceberá o quadro se movendo rapidamente e a animação se repetindo infinitamente. Este é o método mais simples de uma animação de movimento, porem o flash possui uma opção que nos ajuda a facilitar o processo de movimentação dos objetos, esta opção é o que chamamos de Motion Tween, ou interpolação de movimento. 4. Motion Tween 4.a Objetos e Textos Como visto anteriormente aprendemos a fazer a movimentação de objetos de uma forma manual, o flash dispõe para nós uma ferramenta que facilita esse trabalho, que é o que vamos aprender a fazer. O motion tween faz a movimentação de objetos e textos apartir de 2 frames, um inicial onde ficará o objeto em sua primeira posição e outro final onde ficarão o objeto no local para onde você quer movimentá-lo. Então 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 botão 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

15 5 Clique com o botão direito do mouse no frame 1 e em seguida em Create Motion Tween. Aperte CTRL + Enter para visualizar a animação. Vendo a animação você pode reparar que ele realiza o mesmo efeito que se eu tivesse andado o quadrado frame a frame manualmente. Analisando o resultado então temos uma ferramenta bastante útil em nossas mãos. Para criar um motion tween com textos é simples basta fazer o mesmo processo acima porem ao invés de criar um quadrado utilize a ferramenta de texto e crie seu texto na posição inicial, após isso é só seguir os mesmos passos citados acima. 4.b Linha Guia Usando o Motion Tween é possível também criar movimentação 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 símbolos. Para realizarmos esta conversão é simples, 1- No objeto ou texto selecionado clique com o botão direito do mouse e escolha a opção Convert to Symbol 2 Logo depois aparecerá uma janela para que você digite um nome para este símbolo e escolha de qual tipo ele será (Movie Clip, Graphic ou Button), após escolher o tipo é só clicar em OK Os tipos de símbolos se resumem a estas aplicações: Movie Clip Podemos transformar uma pequena animação de um objeto em um único símbolo podendo utilizá-lo em outras animações sem precisar recriá-lo na mesma. Graphic - Neste símbolo podemos agrupar vários objetos formando um só símbolo para trabalhá-los em conjunto como um gráfico ou imagem. Button Este tipo de símbolo faz com que o objeto selecionado ganhe propriedades de um botão.

16 Mas seguindo com nossa animação, 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 símbolo do tipo Graphic. 2 Clique com o botão direito na layer 1 e clique em Add Motion Guide. 3 Será adicionada então uma nova layer chamada Guide:Layer 1, no frame 1 desta layer desenhe com o lápis 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 botão direito do mouse sobre o frame 35 e clique em Insert Keyframe, faça 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 botão direito do mouse e clique em Create Motion Tween. 8 Pressione os botões CTRL + Enter para visualizar a animação. Feito isso o Objeto criado seguirá na animação a linha criada na Guide: Layer 1.

17 4.c Mascara de Objetos Outro efeito de interpolação de movimento que temos no flash é a criação 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 mão na massa seguindo as instruções: 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 botão direito sobre a Layer 2 e clique em Mask 4 Clique nos cadeados que aparecerão na frente das layers para desbloqueá-las. 5 Clique com o botão direito no frame 20 da layer 1 e clique em Insert Frame 6 Clique com o botão 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 botão direito e clique em Create Motion Tween, após isso pressione CTRL + Enter para visualizar a animação. 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 interpolação de formas, que veremos em nosso próximo capitulo.

18 5. Shape Tween Colégio IDESA 2009 Agora vamos aprender a utilizar outro efeito do flash que é a interpolação de formas, com este efeito podemos fazer uma animação de transformação de uma forma e em outra. Vamos fazer um pequeno exemplo seguindo os passos a seguir: 1 No frame1 da layer1 faça um quadrado no canto esquerdo da área de trabalho do flash. 2 No frame 30 da mesma layer clique com o botão 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 opção Shape, como mostra a imagem abaixo. 5 Pressione CTRL + Enter para visualizar a animação. Na animação 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 também para criar mais 2 tipos de efeitos: Transformações de Texto usando Break Apart e a Referência de Forma.

19 5.a Transformação de Texto usando Break Apart Quando trabalhamos com desenho simples de formas no flash é muito fácil fazer o Shape Tween, mas e quando queremos fazer transformações de texto? A idéia é transformar este texto em uma forma, para isso utilizaremos a ferramenta Break Apart (Quebrar em partes) que o Flash dispõem para nós. 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 características de uma forma. Para isso clique sobre a letra A com o botão direito e clique na opção 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 opção Tween selecione Shape. 6 Pressione CTRL + Enter e visualize a animação. Se tudo der certo você vai perceber que a letra A digitada no frame1 se transformará na letra B digitada no frame 30.

20 5.b Referência de Forma Depois de fazermos a transformação de texto, você pode ter reparado que durante a transição ocorreu uma deformação um pouco feia de um objeto para o outro. Para que possamos suavizar esta deformação utilizaremos esta técnica de referencia de forma também chamada de Shape Hint. Vamos seguir os próximos passos e verificar o que acontece: 1 No frame 1 digite o numero 1 usando a ferramenta texto, logo após aplique o Break Apart sobre o numero 1 digitado. 2 Insira um Blank Keyframe no frame No frame 30 digite o numero 2 usando a ferramenta texto e logo após aplique o Break Apart. 4 Selecione o frame 1 e altere no painel de propriedades a opção Tween para Shape. 5 Agora começa a aplicação 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.

21 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:

22 9 Agora pressione CTRL + Enter e visualize a animação. Depois de visualizar sua animação 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 deformação da animação fosse suavizada. 6. Biblioteca Depois que conhecer e aprender como montar algumas animações no flash,vamos conhecer uma ferramenta que nos ajudará a localizar alguns objetos criados em nossas animações. O Painel de Biblioteca, acionado pelo atalho F11, armazena todos os símbolos que criamos durante o nosso projeto. Podemos utilizar este painel para renomear símbolos, editar, duplicar, excluir, mover e etc. Veja a seguir uma imagem do Painel de biblioteca que também pode ser acionado através do menu Window > Library.

23 7. Criando Movie Clip Colégio IDESA 2009 Um Movie Clip é uma pequena animação simplificada a um objeto. Com o movie clip podemos adicionar ao nosso projeto da animação varias animações desligadas da linha do tempo principal, ou seja, enquanto temos nossa animação 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 é fácil, adicione o primeiro objeto que você pretende fazer como pequena animação, após clique nele com o botão direito do mouse, clique na opção Convert to Symbol, você pode nomear este símbolo para poder identificá-lo, selecione a opção Movie Clip e clique em OK. Após 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 animações, após fazer as animações 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 animação.

24 8. Criando Botão No flash como vimos até agora temos a opção de criar uma animação pequena fazendo-a rodar dentro de nossa animação principal através do movie clip. Da mesma maneira como o flash nos permite isso ele também permite que criemos botões com efeitos animados para serem utilizados em animações ou clipes para execução de determinadas ações. Para criar um botão é simples, adicione o objeto que você deseja ter como um botão, após, clique com o botão direito do mouse sobre ele e escolha a opção Convert to Symbol, na janela que aparecerá dê um nome ao seu objeto e selecione a opção Button. Seu botão foi criado, agora precisamos aprender a utilizar suas opções 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 opções como se fossem frames que são: UP, Over, Down e Hit. Estas opções fazem referencia a um evento do botão. Vamos ver quais as características delas: UP É a primeira aparência do botão, está será a primeira aparência mostrada para o usuário. Over Será a aparência de quando o mouse do usuário passar sobre o botão, ou seja, quando o mouse for posicionado sobre o botão ele terá uma nova aparência que é definida nesta opção. Down- É a aparência do botão quando clicado pelo usuário, ou seja, quando o usuário efetuar um clique sobre o botão a sua aparência será a definida neste frame. Hit Esta opção define a área de clique do botão, ou seja, você definirá qual a área dentro do objeto criado onde o botão poderá será acionado, por exemplo, você poderá permitir que um botão que é representado por um desenho de quadrado apenas poderá ser clicado em sua parte de baixo ao invés de poder ser clicado em toda a área do quadrado.

25 Usando esta técnica juntamente com a técnica do movie clip podemos criar botões animados, fazendo com que nosso projeto seja dinâmico. Para criar então cada uma das opções do objeto Button é só você trabalhar com estas 4 opções como se fosse frames normais de uma timeline, ou seja, se você quer fazer a imagem de como o botão ficará quando clicado é só clicar com o botão direito do mouse no frame Down e mandar adicionar uma Blank Keyframe ou então criar uma Keyframe. Após criada os eventos dos botões 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 ( Rótulos) Agora vamos aprender a utilizar um rótulo para apelidar nossos frames. Você deve se perguntar, para que eu precisarei disso? Nós 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 inúmeras Layers e Frames. A utilização do Frame Label também serve de apoio na utilização do Action Script de transição que aprenderemos logo mais, usando estes apelidos para nossos frames chaves podemos ir até estes pontos identificados através de um código especifico, facilitando assim que não tenhamos a necessidade de decorar qual o numero do Frame que eu executava determinada animação. Para então 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. Após vamos até o painel Properties e logo abaixo onde esta escrito Frame veremos uma caixa com o seguinte conteúdo <Frame Label>, clique dentro desta caixa, o conteúdo será apagado automaticamente e ali você poderá definir o nome do apelido que será dado àquele quadro chave.

26 Ao definir o nome do rótulo este nome aparecerá também, em sua timeline como a imagem a seguir: Para evitar problemas, nomeie sempre os Frame Labels com letras sem acentuação e números, sem espaços em branco, caso necessite utilizar espaços para fazer uma separação, utilize ao invés disto um caractere underline ( _ ).

27 Tópico 2 Action Script Sintaxe e Transição 1. Sintaxe O Action Script assim como demais linguagens de programação possuem um modelo padrão de regras para ser escrito, este modelo de regras é o que chamamos da sintaxe. Na língua portuguesa, por exemplo, o ponto final serve para determinar o fim de uma frase no action script o ponto e vírgula determina o fim de uma linha de programação. Vamos ver a seguir algumas sintaxes do Action Script. 1.a Ponto (. ) O caractere ponto (. ) no action script serve para indicar uma propriedade, método ou uma função de um determinado objeto. Veja o exemplo: nome_do_objeto._x = 30; No exemplo definimos através do ponto a propriedade _x que é relacionada a posição do eixo X do objeto nome_do_objeto. 1.b _root A instancia _root faz referência 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 então 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.

28 1.c Chaves ( { ) No action script as chaves servem para agrupar blocos de comandos, normalmente utilizados em laços, condições, funções 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 começa 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 não pertence ao evento on(release), ou seja, este comando será executado quando o frame for carregado independente se o evento ocorreu ou não. 1.d Ponto e vírgula ( ; ) O ponto e vírgula como citado no exemplo inicial deste tópico ele tem como função definir o final de uma linha de comando. Precisamos prestar muita atenção, pois em alguns casos não devemos utilizar o ponto e virgula como quando finalizamos com chaves( ) depois de iniciarmos uma função ou evento e demais casos que veremos no seguir das situações. 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 vírgula) para finalizar, vemos também que depois das chaves de inicio e fim do evento não fazemos o uso do mesmo.

29 1.e Parênteses ( () ) Os parênteses servem para definirmos argumentos dentro de funções 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 botão é acionado, temos o argumento release que define que os comandos delimitados ao seguir do evento ocorrerão quando o botão for solto. 1.f Maiúsculas e Minúsculas No action script as letras maiúsculas e minúsculas são diferenciadas em comandos, nomes de objetos, funções, 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 Comentários Bons programadores tem como rotina adicionar comentários em suas programações, estes são ótimos para que futuras pessoas que vejam a programação possam entender o que acontece em cada linha programadas. Para adicionarmos comentários na programação Action Script usamos duas barras ( // ) e após isso escrevemos o comentário. Os comentários que estiverem dentro da linha iniciada por duas barras não serão executadas.

30 2. Scripts de Transição Colégio IDESA 2009 Ao trabalharmos com os movie clips e buttons vemo-nos na necessidade de criar algumas ações interativas em nossas animações. Vamos aprender neste tópico a aplicar algumas ações de transição de Frames e Scenas em nossos botões. Antes de começarmos precisamos entender que algumas destas ações serão sempre colocadas no evento on(release){ do botão, este evento é executado quando existe o clique no botão. on(release){ funções de transição; A seguir vamos conhecer os comandos mais comuns para trabalho de transição. 2.a gotoandplay(); Este comando de transição serve para rodar a animação 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);

31 2.b gotoandstop(); Este comando de transição, diferente do anterior, encaminha a animação até o ponto determinado e para a animação 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 função faz com que a animação quando parada seja executada a partir do ponto onde foi colocada. Veja sua sintaxe: on(release){ play(); 2.d stop(); Esta função, ao inverso da anterior, faz com que a animação seja pausada no ponto em que é utilizada. Veja sua sintaxe: stop(); Esta função normalmente é usada nos frames (ou seja, diferente de outras funções que são usadas nos botões, mas ela também pode ser usada em um botão) para parar as animações em um determinado ponto. on(release){ stop();

32 2.e nextframe(); Esta função faz com que a animação caminhe e pare no próximo keyframe criado na timeline. Sua sintaxe é a seguinte: on(release){ nextframe(); 2.f nextscene(); Esta função faz com que a animação caminhe e pare no primeiro frame da próxima cena. Ela é usada da seguinte forma: on(release){ nextscene();

33 Tópico 3 Trabalhando Action Script com Objetos Com a utilização de Action Script podemos interagir com objetos como Movie Clips, Graphics, Buttons e trabalhar eventos e ações determinadas pelo usuário. 1. Eventos de Mouse Toda ação que o usuário realiza no computador é reconhecida como um evento. Neste sub-tópico vamos abordar alguns eventos relacionados ao uso do mouse. Por exemplo, o uso do clique do mouse em um botão é um evento, você passar o mouse sobre um objeto também é um evento assim como você clicar e arrastar um botão ou movie clip, todos estes eventos são reconhecidos pela função on(). Vejamos a seguir como funcionam alguns destes eventos e seus devidos códigos de utilização. 1.a Press O evento press realiza uma ação logo quando o botão do mouse é clicado. Quando o usuário realiza a ação de apertar o botão esquerdo do mouse a ação já é executada. Sua sintaxe é a seguinte: on(press){ Ação; 1.b Release O evento release realiza uma ação quando ocorre o pressionamento do botão do mouse, ou seja, quando o usuário pressiona o botão esquerdo e em seguida solta o dedo do mesmo assim realizando o evento. Sua sintaxe é a seguinte: on(release){ Ação;

34 1.c ReleaseOutside O evento releaseoutside realiza uma ação quando ocorre o pressionamento e o soltar do botão fora do objeto clicado, ou seja, o usuário mantem o botão pressionado e arrasta o mouse para fora do objeto sem soltar o botão, quando o mouse esta posicionado fora do objeto o usuário solta o botão do mouse e a ação acontece.sua sintaxe é a seguinte: on(releaseoutside){ Ação; 1.d RollOver O evento rollover realiza uma ação quando o mouse é posicionado em cima do objeto, ou seja, quando o mouse passa sobre o objeto a ação acontece. Sua sintaxe é a seguinte: on(rollover){ Ação; 1.e RollOut O evento rollout realiza uma ação quando o mouse é posicionado e retirado do objeto, ou seja, o usuário posiciona o mouse sobre o objeto e quando o mouse sai fora da área de ação do objeto a ação acontece. Sua sintaxe é a seguinte: on(rollout){ Ação;

35 1.f DragOver O evento dragover realiza uma ação quando o mouse é pressionado sobre o objeto, sem soltar o botão ele é arrastado para fora e retorna ao objeto. Sua sintaxe é a seguinte: on(dragover){ Ação; 1.g DragOut O evento dragout realiza uma ação quando o mouse é pressionado sobre o objeto e sem soltar o botão ele é arrastado para fora. Sua sintaxe é a seguinte: on(dragout){ Ação;