64 :: Webdesign

tutori al i
Por Alexandre Cavalcanti Adobe Certified Expert e Adobe Certified Instructor em Flash CS3. Consultor em design e desenvolvimento web, ps-graduado em design digital. Palestrante e professor dos cursos intensivos, de graduao e ps-graduao do Instituto Infnet desde 2000. Visite seu blog em zarabatana.com/blog.

Actionscript 3.0 para webdesigners - Parte 1/4

Salve, salve, meu caro leitor! Durante as prximas edies, mostraremos como utilizar, de maneira simples e prtica, a linguagem de programao Actionscript 3.0 nos seus projetos em Adobe Flash. O objetivo deste tutorial mostrar que programao no um bicho de sete cabeas e que pode ajudar o webdesigner a automatizar rotinas repetitivas, se comunicar melhor com desenvolvedores e gerenciar projetos mais facilmente, evitando a perda de tempo com tarefas que o computador pode executar facilmente e deixando o foco no que realmente interessa. Criar. Nesta primeira parte, veremos os conceitos bsicos do Actionscript 3.0 atravs de exemplos simples e fceis de seguir, utilizando o Adobe Flash CS4 Professional. Observao: os identificadores (nomes) das variveis no podem conter espaos ou caracteres especiais, exceto _ (sublinhado) e $ (cifro), nem comear por nmero e devem ser nicos no escopo onde so declarados. 5 - Feche o painel Actions e Selecione File Save. var angulo:int; angulo = 45;

Propriedades
Uma propriedade uma caracterstica de um objeto (nome, altura, largura, visibilidade, rotao, opacidade etc.) e com o Actionscript podemos alter-las em tempo de execuo. Neste exemplo, modificaremos a propriedade rotation (rotao) de um MovieClip que est no palco. Vejamos: 1 - Continuando no arquivo AS3_parte1_ex1.fla, selecione o quadrado que est no palco. 2 - No painel Properties, no campo Nome de Instncia (Instance Name), digite: quadrado_mc. 3 - Selecione o quadro 1 da camada AS e clique no menu Window Actions, ou pressione F9. No painel Actions, especifique que o quadrado_mc ter a sua propriedade rotation definida com o valor da varivel angulo. Para isso, digite a seguinte linha abaixo do cdigo j existente: quadrado_mc.rotation = angulo; 4 - Selecione File Save. 5 - Teste o filme, selecionando Control Test Movie, e veja o resultado. Voc modificou a rotao de um objeto em tempo de execuo e com pouqussimas linhas de cdigo. 6 - Vamos utilizar mais uma propriedade. Declare a varivel opacidade como nmero real e atribua o valor .5 (meio) a ela. Em seguida, dena opacidade como valor da propriedade alpha, o que ir tornar o quadrado_mc transparente em 50%. Veja como ca o cdigo ao nal do exemplo: var angulo:int, opacidade:Number; angulo = 45; opacidade = .5; quadrado_mc.rotation = angulo;

Elementos bsicos da linguagem

Antes de comearmos, faa o download dos arquivos desta parte do tutorial em: http://www.revistawebdesign. com.br/index.php/downloads. Para iniciar, abriremos o Adobe Flash CS4 Professional e definiremos nossa rea de trabalho (workspace) como Essentials. Na verso CS4 h diversos layouts da rea de trabalho listados na barra superior do software. Aps o tutorial, escolha o que mais lhe agrada.

Variveis
Uma varivel um espao na memria onde armazenamos um dado. Por exemplo, ao utilizarmos a expresso x = 10, guardamos na memria o nmero 10 e o identicamos como x. Toda vez que quisermos utilizar esse dado, basta chamarmos pelo nome x. Muito bem, vamos comear: 1 - Selecione File Open, escolha o arquivo AS3_ parte1_ex1_inicio.fla e clique Open. 2 - Selecione File Save As... e salve o arquivo como AS3_parte1_ex1.fla. 3 - Selecione o quadro 1 da camada AS e clique no menu Window Actions, ou pressione F9. Aparecer o painel Actions, que o local onde voc escrever o cdigo Actionscript. 4 - Declare uma varivel angulo, que ir armazenar um nmero inteiro. Esse nmero servir, por exemplo, para a definio do ngulo de rotao de um MovieClip. Em seguida, atribua o valor 45 para a varivel angulo. Para isso, digite o seguinte cdigo:

tutorial :: 65

quadrado_mc.alpha = opacidade; 7 - Selecione File Save. 8 - Teste o filme, selecionando Control Test Movie, e note a transparncia do objeto. Observao: caso no tenha dado certo, abra o arquivo AS3_parte1_ex1_final.fla e compare com o exemplo que voc fez.

Observao: o objeto quadrado1_mc girou corretamente e agora iremos executar essa mesma ao no quadrado2_mc, mas utilizando um ngulo diferente. Como iremos girar dois objetos, faremos duas chamadas. Logo, ns teremos que dizer, a cada chamada da funo, qual objeto ser girado e de quantos graus ser esse giro. Esses dados sero passados para a funo atravs de atributos, que no caso se chamaro: objeto e angulo. Os nomes dos atributos seguem o padro das variveis. 6 - Feche a janela do Flash Player e retorne ao painel Actions. Remova as linhas com a declarao e a atribuio da varivel angulo. O ngulo agora ser definido atravs do atributo angulo da funo. 7 - Insira nos parnteses da funo os dois atributos com seus tipos de dado. Isto , o atributo objeto ser do tipo MovieClip, e o atributo angulo ser do tipo int (nmero inteiro). 8 - No bloco de cdigo, substitua a referncia ao objeto quadrado1_mc pelo atributo objeto. Dessa forma, poderemos dizer qual objeto ser girado na chamada da funo. Observe tambm que o valor do ngulo agora ser determinado na chamada da funo, atravs do atributo angulo. 9 - Abaixo do bloco da funo, escreva duas chamadas. Na primeira, o quadrado1_mc ir girar 45 graus para a direita. Enquanto que, na segunda chamada, o quadrado2_ mc ir girar 15 graus para a esquerda. Veja como dever ficar o seu cdigo ao final do exemplo: function girarObjeto(objeto:MovieClip, angulo:int):void { objeto.rotation = angulo; } girarObjeto(quadrado1_mc, 45); girarObjeto(quadrado2_mc, -15); 10 - Selecione File Save. 11 - Teste o filme, selecionando Control Test Movie. Note que os objetos compartilham a mesma funcionalidade, mas de formas diferentes, devido utilizao de atributos. Observao: caso no tenha dado certo, abra o arquivo AS3_parte1_ex2_final.fla e compare com o exemplo que voc fez. T vendo? Programar no to complicado quanto parece. Espero que esses exemplos tenham servido para ilustrar alguns fundamentos do Actionscript. Na prxima edio, faremos com que essas funes respondam s interaes com o usurio, entre outras coisas. A gente se v l. At!

Funes
Uma funo um bloco de cdigo que executado somente quando chamado e que pode retornar um valor. Utilizando funes, voc pode reutilizar um cdigo Actionscript em diversas situaes e de maneira configurvel, atravs de atributos. Vejamos um exemplo: 1 - Selecione File Open, escolha o arquivo AS3_ parte1_ex2_inicio.fla e clique Open. 2 - Selecione File Save As... e salve o arquivo como AS3_parte1_ex2.fla. Obs.: ns agora temos dois objetos na tela (quadrado1_mc esquerda e quadrado2_mc direita) e iremos alterar a rotao de cada um deles de maneira independente. Para isso, vamos criar uma funo chamada girarObjeto. Dica: uma funo sempre ter um carter de ao e deve ser identificada utilizando-se um verbo seguido de um substantivo (ex.: girarObjeto). Valem as regras de identificao das variveis. 3 - Selecione o quadro 1 da camada AS e clique no menu Window Actions, ou pressione F9. No painel Actions, envolva o cdigo que altera a propriedade rotation do quadrado1_mc em um bloco function chamado girarObjeto, delimitado por chaves, e que no retornar valor (void). Logo aps, faa a chamada do bloco escrevendo o nome da funo, girarObjeto, seguido de parnteses, como mostrado no cdigo abaixo: var angulo:int; angulo = 45; function girarObjeto():void { quadrado1_mc.rotation = angulo; } girarObjeto(); 4 - Selecione File Save. 5 - Teste o filme, selecionando Control Test Movie, e veja o resultado.