Apostila

Nvel Intermediario

ndice

Apostila Flash MX - INTERMEDIRIO

-2-

Apresentao Timeline, Layers e Smbolos Modificando o comportamento de um Smbolo Exerccio Aes de controle de reproduo Incluindo Aes Indicando um Alvo Exerccio ActionScript Variveis Texto e Variveis Exerccio Aes condicionais e laos de repetio Exerccio Propriedades de Objetos Exerccio Carregamento de smbolos e variveis a partir de arquivos Exerccio Controle de carregamento Exerccio

(3) (4) (7) (8) (9) (10) (11) (12) (13) (13) (14) (14) (15) (15) (16) (17) (18) (18) (19) (19)

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-3-

Apresentao
Este curso tem como objetivo apresentar algumas tcnicas teis na criao de contedos em Flash. Apresentaremos as principais propriedades dos smbolos e da timeline, e como controlar estas propriedades utilizando comandos ActionScript (cdigos de script que permitem programar mtodos e procedimentos no Flash). O mtodo escolhido para o desenvolvimento destes conceitos a resoluo problemas. Durante o curso, sero apresentadas algumas funcionalidades, e em seguida, um problema proposto. Os alunos devem ento tentar chegar a uma soluo, desenvolvendo as prprias tcnicas para resoluo de alguns desafios que so comumente encontrados no desenvolvimento em Flash. O Flash apenas uma ferramenta que utilizamos para executar uma idia.

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-4-

Timeline, Layers e Smbolos

A Timeline combinada aos layers, forma a estrutura principal de um projeto em flash. baseado nesta estrutura que devemos organizar os elementos grficos. Definimos o que e quando algo vai aparecer, distribuindo os elementos em layers e definindo em cada layer quadros, quadros-chave ou quadros-chave em branco, de acordo com o objetivo pretendido. Por exemplo:

Esta apenas uma das maneiras possveis de se organizar os elementos da animao. possvel obter o mesmo resultado utilizando formas diferentes de organizao, consegue imaginar como?

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-5-

A utilizao de smbolos, adiciona uma nova dimenso estrutura da nossa animao, pois cada smbolo criado possui uma Timeline prpria (inclusive com Layers prprios, verifique!), logo, possvel criar animaes e estruturas organizadas dentro dos smbolos tambm. Exemplo:

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-6-

Existem trs tipos de smbolos, e a principal diferena entre eles o comportamento de suas Timelines. O comportamento padro da Timeline principal iniciar a reproduo pelo primeiro quadro, e seguir mostrando quadro-a-quadro at atingir o ltimo quadro definido, ento ela volta ao primeiro e recomea a reproduo (loop contnuo).

Caracterstica dos smbolos: Grfico (graphic) A reproduo da Timeline de um smbolo do tipo grfico (graphic), est vinculada reproduo da timeline principal. Se a Timeline principal anda um quadro a frente, a Timeline do Smbolo tambm o faz, se voltamos dois quadros na principal, idem para o Smbolo. Clipe de Filme (movie clip) Tem a Timeline totalmente independente da Timeline principal. Um Smbolo movieclip toca em loop, porm pode ter a reproduo controlada por aes (ActionScript), a partir de qualquer local da animao. Boto (button) A Timeline de um smbolo do tipo boto no corre sozinha, somente responde a interaes do mouse posicionando-se em um quadro especifico (up, over, down) .

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-7-

Modificando o Comportamento de um smbolo

possvel alterar o tipo de um smbolo depois de criado: - Selecionando-o na biblioteca com o boto direito do mouse, e alterando suas Propriedades, ou - Selecionando uma instncia do smbolo na rea de trabalho e alterando o behavior em suas Propriedades.

A segunda maneira s altera o comportamento da instncia que est selecionada. O smbolo na biblioteca continuar sendo do tipo que foi criado. Na caixa de propriedades da instncia de um smbolo, possvel alterar o vnculo da instncia com seu smbolo de origem na biblioteca, clicando em Swap... e escolhendo o novo smbolo.

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-8-

Exerccio:
1 Monte uma animao, apresentando imagens e textos animados, utilizando apenas smbolos do tipo grfico se necessrio. (exercicio1.swf).

Dicas: No existe um mtodo de organizao mais correto, o que existe so mtodos que de acordo com o objetivo e a lgica aplicada tornam o desenvolvimento e a manuteno da animao menos trabalhosos. - possvel recortar e colar quadros, ou grupo de quadros, de uma timeline para outra. - possvel criar um novo smbolo duplicando um smbolo j existente na biblioteca.

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

-9-

Aes de controle de reproduo

As principais aes para controle de reproduo da animao so: play(); stop(); nextFrame; prevFrame; gotoAndPlay(); gotoAndStop(); Podemos associ-las a quadros na timeline, eventos de boto e eventos de um movieclip.

Para acessar o painel de Aes pressione F9.

dica: Conhea as aes disponveis navegando pela biblioteca de aes. (rea esquerda da tela)

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 10 -

Incluindo Aes
Para adicionar uma ao, selecione o objeto desejado e na janela de aes, de um duplo clique na ao desejada. Se preferir digitar os comandos, mude o modo da janela de aes, clique no e selecione Expert. Neste modo preciso saber a sintaxe exata, que boto: com o tempo de uso vai se tornando conhecida. A qualquer momento possvel verificar se os comandos digitados esto corretos, basta clicar no boto
. .

Para obter uma descrio da ao selecionada, clique em

dica: todo comando termina com ponto-e-vrgula. Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 11 -

Indicando um Alvo
A menos que seja indicado um alvo, a Ao vai atuar na timeline em que foi aplicada. Para indicar um alvo distinto, preciso primeiro identific-lo e ento adicionar seu nome separado por ponto antes do comando desejado. A timeline principal conhecida como Nvel 0, para comandar uma ao de qualquer lugar da animao, tendo como alvo a timeline principal, basta digitar _level0 ou _root, antes do comando. Por exemplo: _root.gotoAndStop(5);

Quando inserimos um movieclip na timeline principal, ele passa a ser um segundo nvel de organizao, montado em cima do Nvel 0 ( _root ). Se desejarmos controlar um movieclip, necessrio identificar a instncia que se deseja controlar com um nome:

Esta instncia est agora acessvel de qualquer nvel da animao. Para referenci-la, preciso identificar sua localizao e seu nome.Ex.: _root.mv_animais Para parar este movieclip de qualquer ponto da animao, adicionamos a ao: _root.mv_animais.stop();

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 12 -

Exerccios:
2 - Modifique o arquivo do exerccio 1, utilizando agora, apenas um quadro da timeline principal para cada figura. 3 - Construa um timer, para controlar o tempo de troca entre cada figura. 4 - Construa um menu de navegao para a animao.

Dica: possvel utilizar vrias instncias de um mesmo boto transparente, para executar aes diferentes.

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 13 -

ActionScript
Atravs dos cdigos ActionScript, possvel se fazer muito mais do que apenas controlar a reproduo do filme. Em alguns casos, toda uma aplicao pode ser gerada via ActionScript. O mais comum no entanto, utilizar a linguagem de script apenas como suporte, para o que no conseguimos fazer visualmente. Na verso atual do Flash (MX), a linguagem de script alcanou uma certa maturidade, possui todos os principais recursos de uma linguagem de programao e acessa/modifica todas as propriedades dos elementos criados visualmente.

Variveis
Variveis so como repositrios onde podemos guardar informaes teis, para manipular e utilizar mais tarde, como contadores, nome de um usurio, etc... Para criar variveis, basta associar um nome a um valor. por exemplo: var item = 3; var nome = Jacar; Alguns tipos de variveis especiais, precisar ser inicializados, o caso de varveis do tipo array, que so listas numeradas: lista = new array(); lista[1] = ma; lista[2] = banana; lista[3] = pera; O comando trace() pode ser utilizado para mostrar o valor de uma varivel. trace(_root.item); As variveis so criadas no nvel em que so declaradas. Para manipular uma varivel declarada em um outro nvel, preciso indicar sua localizao. Por exemplo: trace(_root.mv_animais.nome); trace(_root.lista[3]);

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 14 -

Textos e variveis
Elementos do tipo texto podem estar vinculados a variveis. Para tal, preciso mudar o tipo da caixa de texto, no painel propriedades do texto. O padro Texto Esttico (static text), mude para Texto Dinmico (dinamic text) se deseja apenas mostrar um texto ou Entrada de Texto(input text) se deseja que o usurio digite em uma caixa de entrada.

Exerccios:
5 Crie uma mquina de animaes de texto (exerccio5.swf)

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 15 -

Aes condicionais e laos de repetio

Em algumas animaes, preciso se verificar uma condio antes de prosseguir (uma tela de Login por exemplo). Nestes casos podemos utilizar o comando if para verificar uma condio. Exemplo: on(release) { if ( pass == senha) { gotoAndStop(2);} else { gotoAndStop(3); } } De maneira semelhante definimos os laos de repetio, que permitem repetir um bloco de procedimentos. for (x=1; x<4; x++) { trace(_root.lista[x]); } ------------------------------x=1; while (x < 4 ) { trace(_root.lista[x]); x++; } Ambos os cdigos produzem o mesmo resultado: mostram os valores da varivel _root.lista[], nas posies de 1 a 4.

Tome nota: - Utilizamos chaves {} para indicar o inicio e o fim de um bloco de execuo - Para comparaes de valor, devemos utilizar um Duplo sinal de igual.

Exerccio
6 - Crie uma tela de login, que pea nome e senha, libere o acesso no caso dos campos estarem certos, e trave depois de 3 tentativas erradas.

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 16 -

Propriedades de Objetos
Atravs de ActionScript, possvel acessar e alterar a propriedade de alguns objetos da animao como botes, movieclips e caixas-de-texto. Algumas propriedades teis so: _x _y _width _height _visible _rotation posio horizontal posio vertical largura altura visvel rotao pixels pixels pixels pixels true/false 1 - 360

Outras propriedades esto disponveis na biblioteca de aes, e podem ser acessadas de maneira semelhante;

Exemplo de uso : Este cdigo inverte as coordenadas de posio de um movieclip { pos_y= _root.movieclip._y; pos_x= _root.movieclip._x; _root.movieclip._x = pos_y; _root.movieclip._y = pos_x; }

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 17 -

Exerccio
7 Monte um mapa navegvel (exercicio7.swf)

Extra: Que tal adicionar uma ferramenta de zoom para o mapa ?

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 18 -

Carregando smbolos e variveis a partir de arquivos

O comando loadMovie() permite o carregamento de um arquivo externo em um smbolo dinmico na animao, que pode ser manipulado como um smbolo nativo. Utilizao: loadMovie(nome do arquivo,nome de destino); Para descarregar o arquivo da animao utilizamos o comando unloadMovie(); De maneira semelhante, o comando loadVariables() possibilita o carregamento de variveis e respectivos valores previamente declarados em um arquivo de texto. Este recurso muito til em sites que possuem atualizao rotineira de contedo. Utilizao: loadVariables(arquivo texto,nvel da animao);

Exerccio:
8 Crie um site em que os textos dos menus so carregados dinamicamente. Cada item do menu deve carrega um arquivo de animao (exerccio8.swf)

Cludio Martinez Roander Scherer

Apostila Flash MX - INTERMEDIRIO

- 19 -

Controle de Carregamento
A medida em que adicionamos contedo em nossas animaes, cresce o tamanho do arquivo final. Quando o destino a internet, a animao pode demorar algum tempo para carregar. Nestes casos, podemos criar indicadores de carregamento, que indicam ao usurio quanto falta a carregar, para tal, preciso programar uma pequena rotina, que testa quantos quadros foram carregados do total, utilizando as propriedades e mtodos: _framesloaded _totalframes getBytesLoaded() getBytesTotal().

Exerccio: 9 Monte esta rotina, tendo como exemplo o arquivo (exercicio9.swf)

Cludio Martinez Roander Scherer