e-learning “action script” - dei.isep.ipp.ptpaf/proj/2003/actionscript.pdf · exemplo de...

Action Script “e-Learning”

Instituto Superior de Engenharia do Porto

Departamento de Engenharia Informática

Junho de 2003

e-Learning “Action Script”

Adérito Fernandes

Página I


Página II


Autor do Projecto: Adérito dos Santos Curcialeiro Fernandes Aluno N.º 930461 Orientador do Projecto: Eng.º Carlos Miguel Miranda Vaz de Carvalho

Página III


Página IV



1. Índice Página V


Página VI


1.1. Índice Geral

1. Índice 1.1. Índice Geral VII 1.2. Índice de Exemplos VIII 1.3. Índice do Curso XVII 2. Introdução 2.1. Resumo X 2.2. Motivação X 2.3. Metodologia X 2.4. Esquema do Relatório XI 3. Curso de e-Learning “ActionScript” 3.1. Introdução X 3.2. “e-Learning breve introdução” XIV 3.3. Índice do Curso XVII 3.4 Curso de e-Learning XXIII 4. Conclusão 4.1. Breve nota do autor 106 5. Glossário 5.1 Conjunto de termos mais usados 109 6. Referências 6.1. Referências mais Relevantes 111

Página VII


1.2. Índice de Exemplos

1.2.1. Exemplo de construção de storyboard 38 1.2.2. Exemplo de utilização das acções play(), stop() e gotoAndPlay() 43 1.2.3. Exemplo de utilização dos eventos associados a botões 48 1.2.4. Exemplo de criação de janelas deslizantes 54 1.2.5. Exemplo de como criar variáveis de input/output 62 1.2.6. Exemplo de como atribuir um nome a um objecto 65 1.2.7. Exemplo de utilização da função “loadMovie” 67 1.2.8. Exemplo da utilização de “if” “elsif” “else” “while” “function” 72 1.2.9. Exemplo de criação de mecanismos de pré-load 79 1.2.10. Exemplo de criação de um jogo 85 1.2.11. Exemplo de interacção entre o php e o mysql 95 1.2.12. Exemplo de interacção entre o flash e o php 96 1.2.1.3 Exemplo de como inserir correctamente um flash numa página101

Página VIII



2. Introdução Página IX


2.1. Resumo

Este trabalho foi realizado no âmbito da cadeira de Projecto, do 5º ano do curso de Engenharia Informática - Computadores e Sistemas, do Instituto Superior de Engenharia do Porto durante o segundo semestre do ano lectivo de 2002/2003. Pretendo com este trabalho apresentar a matéria a dar em várias aulas relativamente a um curso de e-learning relacionado com ActionScript. O curso será divido em lições, sendo cada lição acompanhada por um tutor. O curso terá como objectivo principal transmitir conhecimentos a alunos que pouca ou nenhuma formação tenham em ActionScript, ficando no final do curso aptos a desenvolver soluções que envolvam ActionScript em níveis de complexidade de programação elevada como por exemplo jogos de computador. 2.2. Motivação O que me levou à escolha e realização deste trabalho foi o facto de eu já ter um vasto conhecimento nesta área para além de também se tratar de uma oportunidade para expor as minhas ideias relativamente ao ActionScript em níveis de programação mais avançados. Outra razão é a possibilidade de se poder utilizar este material para a formação de colaboradores novos que venham a reforçar a equipa de desenvolvimento multimédia que coordeno actualmente na empresa Multitema Multimédia e Design, S.A. 2.3. Metodologia

Para a realização deste trabalho foi necessário a realizar pesquisas na Internet e consultar manuais de formação em programação FLASH de forma a obter bom material sobre algumas especificidades que um curso de e-Learning implica. Também importante foi o apoio e o material facultado pelo meu orientador bem como a experiência profissional que eu possuo nesta área. Posso dividir a evolução do trabalho em três fases distintas: - Recolha

Nesta fase procedi à recolha de informação relacionada com metodologias de ensino através de e-Learning e diversos exemplos de ActionScript. Para esta recolha contei com a preciosa ajuda da Macromedia, que contém no seu Site vários exemplos de ActionScript e de material que me foi cedido pela Multitema (do qual sou responsável) contendo mais exemplos inclusive de PHP que serão apresentados em cada lição do respectivo curso.

- Análise Nesta fase analisei todo o material recolhido por forma a filtrar o que é importante e o que não tem interesse pedagógico.

Página X


Pode-se inserir ainda nesta fase a realização de um esboço da matéria a tratar em cada aula devidamente distribuída pelas várias aulas seguindo uma orientação de menor complexidade até á maior complexidade.

- Elaboração Após a recolha de material, sua análise e respectiva planificação, comecei a descrever cada aula até dar por concluído o curso de e-Learning de ActionScript que descrevo ao longo das restantes páginas deste relatório.

2.4 Esquema do Relatório

O relatório encontra-se dividido em 3 partes distintas: 1- Introdução, uma pequena explicação sobre o curso 2- Índice do curso 3- O Curso que se divide por 14 aulas.

Página XI


Página XII



3. Curso de e-Learning “ActionScript” Página XIII


3.1. Introdução

O curso a realizar deverá constituir 14 aulas, que deverão ser acompanhados por um orientador responsável pela análise dos resultados do formando após o termo de cada aula. Sempre que o formando concluir uma aula deverá responder a um exercício e enviar a resolução para o orientador. Sempre que o aluno concluir a o exercício que lhe foi proposto, cabe ao seu orientador enviar-lhe a password que permitirá aceder á próxima aula. Este processo repete-se ate que o aluno tenha concluído a ultima aula do curso. O sistema deverá impedir que o formando possa realizar mais do que uma aula diariamente. O curso inicia com a inscrição do Formando que recebe uma login e password por forma a poder aceder a dados sobre o seu orientador (nome, email, ...) e claro a iniciar o curso começando pela sua primeira aula. 3.2. “e-Learning breve introdução” O que é e-Learning? O e-Learning está a tornar-se na revolução do ensino para as áreas digitais, o futuro do ensino passa pelo e-Learning. Na maior parte das vezes, as aulas não deixam de ser a mera exposição de conhecimentos adquiridos pelos professores que através da exposição de acetatos os passam para os alunos, o papel dos professores tende a ser cada vez mais a orientação, consiste em orientar os alunos para autonomamente atinjam determinados níveis de conhecimento. Agora imagine-se que o aluno não necessitava de se deslocar à sala de aula, bastando aceder a uma página WEB para poder obter toda a matéria que ia ser dada na aula, a única falta que poderia sentir para além do convívio com os colegas, seria a opinião e esclarecimentos do professor relativamente à matéria que ia ser dada. Mas se o aluno pudesse obter esse mesmo feed-back do professor através de email passava a usufruir de todas as condições de ter o mesmo sucesso de aprendizagem da matéria que teria se estivesse fisicamente na sala de aula. Por ter consciência disso, A Sociedade actual terá de se adaptar porque o futuro do ensino passa pela implementação de sistemas de e-Learning, em que os alunos deixam de ter de se deslocarem à sala de aula, para poderem passar a ter as aulas através de um terminal de computador. Vantagens As vantagens na utilização do e-learning são a possibilidade de um acompanhamento

mais personalizado entre o formador e o aluno, pois com a troca de emails entre ambos os interlocutores, garante-se que todos os alunos tem a possibilidade de exporem as suas questões e de as verem resolvidas o que muitas vezes não sucedia pela aglutinação da palavra por parte de alguns alunos em relação ao mais tímidos.

Outra das vantagens será a de os alunos mais tímidos, face a uma terminal de comutador, deixarem de ter complexos em exporem os seus problemas e dúvidas, porque não sentem

Página XIV


represálias dos colegas, nem se sentem violados por outros ficarem a conhecer as suas dúvidas, pois o diálogo mantém-se estritamente entre o professor e o aluno.

Outra vantagem é a possibilidade de os professores não se sentirem limitados na exposição da matéria quer por alguma limitação física aparente ou pelo facto de terem mais ou menos idade que os alunos, como os alunos não tem acesso a imagens visuais do professor cada um pode imaginar o professor ideal (na eventualidade de não existir sistemas de vídeo conferencia)

Outra vantagem é o tempo, por não ser necessário o aluno deslocar-se ao instituto de ensino, à um ganho de tempo precioso que pode ser aproveitado para realizar outras tarefas.

A possibilidade de se estudar a lição à hora que for mais conveniente permite que cada aluno tenha o seu horário adaptado à sua agenda pessoal.

Se todo o sistema de ensino se baseasse no e-learning existia também um ganho significativo na redução de despesas na construção de edifícios.

Outro ganho era o de se poder centralizar o conhecimento, existindo apenas uma central que guardasse todo o conhecimento, todos os formadores poderiam aceder a essa base de dados e trocar informações úteis entre eles obtendo ganhos significativos na aquisição de conhecimentos.

Tal como os alunos que deixavam de ter necessidade de se deslocar à unidade de ensino, também os professores podiam usufruir das mesmas condições dos alunos (ter horário à medida, não ter a necessidade de se deslocar, ....)

Desvantagens O aumento do desemprego por deixar de ser necessário existir alguns cargos. Reflexo negativo na sociedade em empresas que obtém rendimentos na prestação de

alguns tipo de serviços aos institutos de ensino (construção de edifícios). Sociedade mais fechada, falta de diálogo em sociedade. Perda de valores de sociedade pela falta de convívio. Sociedade cada vez mais dependente da tecnologia. Aumento da obesidade pela falta de realização de exercício físico (como andar).

Conclusão Sabe-se que o futuro será o e-learning e que apesar das desvantagens que acarreta, cabe á sociedade adaptar-se e encontrar soluções para o futuro.

Página XV


Página XVI


3.3. Índice do Curso AULA I – “ActionScript - Introdução”

1- Introdução 23 2- Flash 5 ActionScript 23 3- Requisitos de aprendizagem 23 4- Flash – O explorador de ficheiros 23 5- Flash – O Stage 24 6- Flash – Definições 24 7- Convenções utilizadas 25 8- Exercício 25

AULA II – “ActionScript - Iniciação”

1- Introdução 27 2- Eventos no Flash 27 3- Comentários 30 4- Comandos, argumentos e propriedades 30 5- Instruções 31 6- Sintaxe 31 7- Resumo 32 8- Exercício 32

AULA III – “ActionScript - Traçando planos”

1- Introdução 37 2- Traçando planos 37 3- Libraria de Ideias 37 4- Storyboarding 37 5- Construindo ActionScript 38

a. Estilo Top Down 38 b. Estilo Botton Up 38

6- Exemplos 38 7- Resumo 39 8- Exercício 39

Página XVII


AULA IV – “ActionScript - Timeline Actions”

1- Introdução 41 2- Timeline Paths 41 3- Adicionando acções básicas à Timeline 42 4- Adicionando Labels à Timeline 42 5- Exemplos 43 6- Resumo 45 7- Exercício 45

AULA V – “ActionScript - Começando a interactividade”

1- Introdução 47 2- Criar um botão 47 3- Interactividade com MoviClips 47 4- Exemplos 48 5- Resumo 50 6- Exercício 50

AULA VI – “ActionScript - Truques de navegação”

1- Introdução 51 2- Botões invisíveis 51 3- Ligar Cenas 52 4- Ligar Labels 52 5- Ligar MovieClips 52 6- Ligar SWFs e Níveis 52 7- Adicionar animações a botões 52 8- Janelas deslizantes 53 9- Resumo 59 10- Exercício 59

Página XVIII


AULA VII – “ActionScript - Variáveis”

1- Introdução 61 2- Literais e expressões 61 3- Variáveis de Input 61 4- Variáveis de Output 63 5- Atribuir nomes às variáveis 64 6- Variáveis numéricas 64 7- Variáveis booleanas 65 8- Actionscript – Objectos, propriedades e métodos 65 9- Exemplos 67 10- Resumo 68 11- Exercício 68

AULA VIII – “ActionScript - Loops”

1- Introdução 69 2- Tomada de decisões 69 3- “if” 69 4- “elseif” 70 5- “else” 70 6- Action script loops 70 7- Arrays 71 8- Exemplos 71 9- Resumo 74 10- Exercício 74

AULA IX – “ActionScript - Interactividade avançada”

1- Introdução 75 2- Instanciação 75 3- Classes – métodos, propriedades, comportamentos 76 4- Definição de objectos (Movieclips, objectos não gráficos) 77 5- Interactividade Avançada e propriedades dos objectos 78 6- Preloads e Cache 78 7- Exemplos 79 8- Resumo 84 9- Exercício 84

Página XIX


AULA X – “ActionScript - ActionScript Modular”

1- Introdução 85 2- Conceitos sobre jogos, Exemplo 85 3- Criar os objectos 85 4- Criar o script que coloque todos os objectos nas posições

correctas e que iniciasse todas as variáveis que vão ser utilizadas 86

5- No mesmo frame as funções que correspondem aos métodos de cada objecto 88

6- Funções auxiliares 90 7- Motor do jogo 91 8- Variáveis e funções que devem ser invocadas sempre que se

entra no frame 91 9- Resumo 91 10- Exercício 91

AULA XI – “ActionScript - PHP”

1- Introdução 93 2- Interacção entre o Flash e o PHP 93 3- O que é o PHP 93 4- Comandos básicos de PHP 94 5- Exemplos 94 6- Resumo 94 7- Exercício 94

CAPITULO XII – “ActionScript – troca de informação com Bases de Dados”

1- Introdução 95 2- Como utilizar o PHP para trocar informações com Bases de Dados 95 3- Cuidados a ter com o delay das comunicações 96 4- Exemplos 96 5- Resumo 99 6- Exercício 99

Página XX


AULA XIII – “Action Script – Compatibilidade/Conflitos”

1. Introdução 101 2. Compatibilidade entre diferentes sistemas operativos e browsers 101 3. Problemas com alguns browsers 102 4. Novos interfaces (Pocket PC) 102 5. Resumo 103 6. Exercício 103

AULA XIV – “Fim do curso”

1- Notas Finais 105 2- Disponibilizar em PDF o curso 105 3- Entrega de Certificado 105

Página XXI


Página XXII


3.4 Curso de e-Learning AULA I – “Action Script - Introdução”

1- Introdução Esta é a primeira aula, o aluno ficará a conhecer a ferramenta com que irá trabalhar, o Flash. Terá o primeiro contacto com algumas das suas funcionalidades como o explorador de ficheiros, ficará também a conhecer o Stage e qual a orientação dos objectos em relação ao eixo dos xx e yy. O aluno com a ajuda do orientado fará o seu primeiro programa de flash apresentando a famosa frase “Olá Mundo” no seu programa de flash. A aula terminará sem se aprofundar mais, dando liberdade ao aluno para começar a interagir com a aplicação de desenvolvimento “Flash”.

2- Flash 5 Action Script A interactividade emergente que o ActionScript, nomeadamente a partir da versão 5 do Flash veio trazer, foi uma nova visão à forma como se encara o WebDesign. Actualmente, a linguagem de programação ActionScript já é considerada uma linguagem orientada para objectos totalmente interactiva. Todas estas mais valias permitidas pelo ActionScript associadas a ficheiros leves, característica fundamental do FLASH, tornam as aplicações resultantes totalmente independentes da máquina e sistema operativo, trazendo uma nova geração de programas que conseguem conciliar a animação com a programação ao seu mais alto nível. Durante as várias aulas o aluno ficará apto a conceber soluções em flash, começando por aprender processos simples de interactividade entre o utilizador e o flash, avançando aula a aula os seus conhecimentos até à aula final em que o aluno desenvolverá um jogo, como meio de aplicar os seus conhecimentos e ficar apto a desenvolver aplicações em Flash ao nível dos melhores programadores a nível internacional. 3- Requisitos de aprendizagem Foi considerado que o aluno já deve possuir alguns conhecimentos básicos de flash, que lhe permitam identificar os termos: timeline, stage, library, movieclip e também já ter algum conhecimento de HTML e JAVASCRIPT. 4- Flash – O explorador de ficheiros Durante as aulas, pode acontecer que o código desenvolvido fique mais complexo e movieclips ou scripts se percam no projecto de flash que está a ser criado. Através do explorador de ficheiros todos esses scripts ou movieclips passam a ser detectáveis, deixando de existir motivos para ficarem perdidos dentro do respectivo projecto. Para se aceder ao explorador de ficheiros, o caminho é Window > Movie Explorer.

Página 23


Agora proponho que pratique um pouco criando alguns objectos e veja a reacção do explorador de ficheiros. 5- Flash – O Stage O stage como é designado no flash, representa a janela onde todos os acontecimentos têm lugar, pode-se equiparar a um teatro, o stage é o palco onde os actores actuam. Uma das características do stage é a possibilidade de se activar uma régua que permita identificar a distância entre um objecto e o canto superior esquerdo do stage. A visualização da régua pode ser activada ou desactivada acedendo ao menu “View > Rulers”. As medidas apresentadas representam medidas utilizadas para impressão e design, diferem das medidas cartesianas utilizadas pela matemática na medida em que a direcção do eixo dos yy é no sentido inverso à da direcção representada pelas medidas cartesianas:

6- Flash – Definições O flash permite personalizar várias prefeambiente de flash de forma a ficar em sinseguimento da formação. Para isso basta aceder às preferências eiguais à seguinte imagem:

Página 24

X
Y Coordenadas em flash
rências, pede-se ao aluno que personalize o seu tonia com os exemplos que serão apresentado no

m: Flash > Preferences e garantir que as fiquem


7- Convenções utilizadas Para facilitar a compreensão dos exemplos utilizados pode ser que sejam usados diferentes tipos de letra e cores que diferem das que escreverá nas suas aplicações, isto não implica que o seu programa não funcione.

8- Exercício Agora propõe-se a criação de um exemplo em flash que mostre a palavra “Olá Mundo”

Página 25


Página 26


AULA II – “Action Script - Iniciação”

1- Introdução Nesta aula será dada alguma teoria, mas apenas a que considero exclusivamente necessária para se entender alguns termos que serão utilizados no seguimento do curso. No final da aula, mostrar-se-á o que se consegue apenas com duas linhas de código. O aluno ficará a conhecer o conceito de Eventos, Comentários, Comandos, Argumentos, Propriedades, Instruções e qual a sintaxe a utilizar. 2- Eventos no Flash Quando se pensa em Action Script pensa-se em interactividade, no fundo trata-se de “fazer acontecer coisas” mediante eventos causados pelo utilizador, por exemplo, abrir uma página após um clique num botão. Imagine um relógio de cuco, que a cada hora, o cuco sai do relógio e emite um som, imagine também que se pode definir um alarme para que numa determinada hora o relógio comece a fazer um barulho diferente servindo de despertador. A estes acontecimentos chamam-se eventos e aos sons produzidos pelo relógio chamam-se acções. O ActionScript é conhecido como sendo uma linguagem de condução de eventos. O que é então um evento no Flash? Pode ser considerado como algo que acontece externamente, pode ser a pressão de um botão pelo utilizador, ou a pressão de uma tecla do teclado. Pode também ser considerado como algo que acontece dentro do flash, como carregar um filme ou mover-se para o próximo frame, quando o flash desencadeia a acção de mover para o próximo frame ele verificará se tem instruções associadas a esse evento e se as tiver, executa-as. A isso chama-se um evento interno pelo facto de ser o flash a gerar esse evento. Quer se tratem de eventos internos ou externos, o Flash trata-os da mesma forma: ActionScripts estão preparados para detectar um evento em particular. Uma vez ocorrido esse evento, uma série de ActionScripts serão executados.

Aos ActionScripts que são executados após a ocorrência de um evento chamam-se de eventhandler. Em conclusão, sempre que se pretender ter um evento, deve-se ter um evenhandler. Por exemplo, imagine-se um botão que aguarda que o primam. O utilizador pressionou o botão – EVENTO O Flash detectou esse evento e executou o ActionScript que lhe estava associado –

EVENTHANDLER O utilizador recebe o resultado.

Este tipo de relação evento/eventhandler é fácil de perceber quando se tratam de objectos simples como botões, no entanto essa relação já não é tão linear quando se trata de eventos gerados internamente pelo flash.

Página 27


OK, para quem já tem alguma experiência em programação e é novo na utilização de linguagens de ActionScript deve estar a perguntar, afinal quais são as vantagens de utilização da relação eventos/event handler? A resposta é muito simples, quando se programa em linguagens como por exemplo em VisualBasic, é sabido que são bastante boas na resolução de problemas em que o código é executado linearmente, primeiro executa-se a linha 1, depois a linha 2 e por ai sucessivamente. Infelizmente na vida real, os acontecimentos não sucedem linearmente, por exemplo quando se vai às compras é natural que não se siga a lista de compras linearmente tal como foi planeada. Dessa forma, como não se pode esperar que as coisas aconteçam pela ordem desejada terá de se lidar com os acontecimentos pela ordem em que ocorrem. Nunca se terá a certeza de que o evento A acontecerá antes do evento B, terá de se prever que tanto A ou B podem acontecer em primeiro lugar. Por esse motivo, ao contrario das linguagens de programação como o VisualBasic que é interpretado sequencialmente, o ActionScript está preparado para dar resposta em tempo real aos eventos assim que ocorrem. Após esta breve introdução ao ActionScript está na altura de se começar a escrever algum código. Pode-se então agregar ActionScript a 3 situações num movieclip: A um Keyframe A um botão do Stage A um movieclip do Stage

Para começar vamos começar pelo mais fácil dos 3: Atribuir ActionScript a Keyframes Para se atribuir um ActionScript a um keyframe, não é necessário ter mais do que um

keyframe, a janela “Frame Actions” e uma linha de código. Vamos então, no nosso filme, seleccionar a primeira frame da Layer 1

Ainda com o frame seleccionado, abrir a janela “Frame Actions” que pode ser feito através de uma das seguintes hipóteses: Fazendo dois cliques consecutivos no frame (versão 5.0). Acedendo ao menu “Window > Actions”. Ou através da tecla de atalho que lhe está associada.

Página 28


Independentemente da forma como se abre a janela de ActionScript o resultado obtido será semelhante a:

Esta janela difere de versão para versão do flash, mas em todas elas, do lado esquerdo encontram-se todos os eventos que podem estar associados a um objecto, bem como todos os comandos que podem ser utilizados dentro do evento, (condições de IF, funções para tratamento de Strings, etc…). Quando é escolhido um comando ou acção de entre uma das disponíveis do lado esquerdo, é passado automaticamente para o lado direito da janela com as várias possibilidades que lhe são permitidas acontecendo apenas no modo Normal, porque existe também o modo Expert que permite ao programador escrever código livremente sem obter sugestões do flash, mas isso veremos mais adiante. Escolhendo então uma das opções do lado esquerdo, a opção “Actions” seguida da opção “Movie control” e da opção “Stop” obtém-se a primeira acção associada ao Keyframe seleccionado.

Página 29


Esta acção é uma acção de grande importância, pois é através da Acção “Stop();” que se vai poder parar o movie permitindo mostrar botões ficando o movie parado à espera por um evento, que pode ser desencadeado por botões ou por outro tipo de elementos. 3- Comentários Como vimos anteriormente, a acção “stop();” não é difícil de entender, mas existem outras acções e/ou conjunto de acções que se tornam mais difíceis de entender, por esse motivo é necessário escrever comentários para descrever melhor o código. O método para se introduzir comentários no código é semelhante ao do C++, ou seja: // para comentar uma linha de código ou /* …. */ para comentar um pedaço de código ou texto. Para ajudar, no flash o código comentado fica a uma cor diferente da do restante código. Finalmente fechando a janela de Actionscript pode-se verificar que o frame onde se inseriu o script ficou com um “a” pequenino, serve para identificar frames que contenham scripts associados.

Depois desta primeira experiência com ActionScript, é importante rever alguma da terminologia da programação. Tal como nas outras linguagens, também as instruções de ActionScript devem ser exactas, as instruções dividem-se em três grupos bem definidos: Comandos Argumentos Propriedades

4- Comandos, argumentos e propriedades Os Comandos e Argumentos fazem sentido se os compararmos com quando os nossos pais nos pedem para limpar o quarto, não no sentido de ordem mas pressupondo uma das seguintes situações: Quando se é o único filho e só existe um quarto para limpar, então os nossos pais não

necessitam de especificar que quarto devemos limpar. Mas se existirem vários quartos e mais irmãos, então é necessário pelo menos

especificarem que quarto é para limpar. No primeiro caso não é necessário adicionar mais informação ao pedido, basta

receber esse simples “comando” para se limpar o quarto. No segundo caso, é necessário adicionar informação extra chamando-se a essa

informação extra “argumentos”.

O comando stop(); que vimos anteriormente não recebe qualquer argumento pois o flash sabe o que deve fazer apenas com esse comando.

Página 30


Mas se for um comando diferente como por exemplo o comando gotoAndPlay(); já se torna necessário passar argumentos para que o flash saiba para que frame deve ir, exemplo: gotoAndPlay(10); em que o número 10 identifica que a frame de destino é a 10. Passando para um nível de programação mais avançado temos as propriedades, no exemplo dado anteriormente a propriedade do quarto é se está limpo ou se está sujo. No flash as propriedades estão disponíveis no submenu “properties” da janela das Acções em que deixando o rato sobre a propriedade desejada algum tempo surge um comentário que explica a propriedade e os parâmetros que pode receber. Juntando os comandos, argumentos e as propriedades obtém-se as instruções. 5- Instruções Existem diferentes tipos de instruções mas todas elas encaixam-se numa das seguintes categorias: Faz este comando. Faz este comando usando este argumento. Altera esta propriedade de acordo com este argumento. Se esta instrução é verdadeira então executa esta série de acções. Continua a executar este grupo de instruções enquanto for verdadeiro qualquer coisa.

Se ainda nunca programou, então veja o seguinte exemplo: Fica a fazer isto… Meter água no copo Enquanto o copo não estiver cheio

Meter água no copo é o número 2 da lista, o comando é pôr e o argumento é água no copo. 6- Sintaxe Uma parte importante em cada linguagem desde a linguagem chinesa, egípcia á europeia, é a ordem com que as frases são construídas, a sintaxe, não interessa em que linguagem se fala mas espera-se ouvir as palavras segundo uma certa ordem para compreender o significado da frase acabada de ouvir. Contrariamente ás linguagens faladas o ActionScript apenas necessita de satisfazer alguns requisitos de sintaxe que se podem dividir em três categorias:

1- Quando começa ou acaba uma acção individual Cada acção básica começa numa nova linha e termina com ; As únicas excepções são os comentários // e comandos de agrupar acções {}

2- Que parte da acção é o comando, o argumento e a propriedade?

// comentário x = 10; stop(); Stop = acção e dentro dos () estão os argumentos.

3- Que linha executar mediante uma certa condição se for aceite ou não e que conjunto

de acções devem ser executadas continuamente até que seja satisfeita uma determinada condição.

Página 31


7- Resumo Nesta aula vimos o que são comentários, comandos e argumentos e vimos como se atribui uma acção

8- Exercício Para que o aluno possa aplicar os conhecimentos adquiridos nesta aula propõe-se o desenvolvimento de um exercício simples que corresponda a ter um circulo a movimentar-se no ecrã e que pára no keyframe 55 com a acção “stop();”. Para ajudar neste primeiro exercício vão ser explicados todos os passos a realizar:

1. Seleccionar a opção circulo da barra de ferramentas e desenhar um circulo no stage.

Página 32


2. Seleccionar o circulo com o rato e escolher a opção do menu “insert > Convert do symbol” que normalmente corresponde à tecla de atalho F8.

3. Surge então uma janela com vários campos que podem ser escolhidos:

4. Desta janela pode-se escolher o nome que queremos atribuir ao novo símbolo e qual

deve ser o seu comportamento. Pode ser do tipo Movie Clip quando se pretende ter Movie Clips dentro de

outros movie clips permitindo reutilizar um mesmo movie clip as vezes que se quiser sem se ter a necessidade de o duplicar.

Pode ser do tipo botão sempre que se pretendam ter botões é necessário que sejam símbolos com comportamentos de botão.

E gráficos quando se tratam de símbolos simples como é o caso do circulo a animar.

Página 33


5. Depois de escolhido o “behavior” “Graphic” e feito OK, já temos um novo símbolo no stage em substituição do circulo que foi desenhado no stage.

6. Note-se que para animar objectos é necessário que sejam símbolos de outra forma a

animação não acontecerá. 7. Agora é necessário criar alguns frames, para isso basta seleccionar o frame 40 e

inserir um novo Keyframe que pode ser feito através da tecla de atalho F6.

8. Agora é necessário seleccionar o frame 1 e no menu seleccionar “insert > creat motion tweening”

Página 34


9. É a opção “Create Motion Tween” é que dá instruções ao flash para converter o conteúdo da layer seleccionada entre keyframes em animação, que corresponde a uma transformação de símbolos entre os keyframes. Essa transformação pode ser uma simples translação no espaço. Para exemplificar, seleccione-se o ultimo keyframe, na posição 40 e desloque-se o circulo. Se agora se testar já temos animação, para testar seleccione a opção “control > Play”

10. Só falta inserir a acção “stop();” no keyframe 40 para terminar o exemplo de outra

forma quando se exportasse o projecto a animação ficaria em loop.

Página 35


Página 36


AULA III – “Action Script - Traçando planos” 1- Introdução Nesta aula vamos rever a importância que há na elaboração de um bom storyboard (planificação no papel do que será a aplicação final). A regra principal é que se não funcionar no papel então também não vai funcionar no computador. Dada a diferença entre esta aula e aulas mais práticas, não será exigido muito esforço ao aluno, sendo a aula bastante sintetizada. 2- Traçando planos Como o Flash é mais do que uma linguagem de programação é necessário planificar no papel antes de se começar a programar, tal como nos filmes existe um guião também no flash deve existir um storyboard. Em primeiro lugar deve-se traçar um esboço do que se pretende, mesmo que se tratem apenas de alguns riscos, esta fase tem uma importância redobrada porque, para além de servir de orientação para o storyboard final serve também para expor ideias perante o cliente que está a financiar o projecto. Para facilitar a elaboração do primeiro esboço é importante possuir já um conjunto de exemplos de partida “Libraria de ideias”. 3- Libraria de ideias Possuir um conjunto de exemplos de partida para a elaboração de um esboço do que será o sotryboard final é o sucesso de muitas empresas, ganhando tempo na elaboração desses esboços e reutilizando trabalho já desenvolvido permite poupar custos e libertar meios humanos para o desenvolvimento dos projectos depois de adjudicados pelas empresas que os pretendem. Quando a libraria é reduzida deve-se começar por desenvolver projectos mais simples e gradualmente ir aumentando o grau de complexidade da oferta de serviços. Deve-se guardar desde o primeiro dia todo o trabalho que se venha a desenvolver, pois será a partir desse trabalho, de projectos concluídos e de projectos que não passaram da fase de storyboarding que a libraria de ideias será enriquecida.

4- Storyboarding Depois de um primeiro esboço é necessário aprofundar mais as ideias, é então que se passa para a fase de Storyboarding. O Storyboard deve constituir um meio de comunicação que permita transmitir as ideias que se tem para o projecto a desenvolver, entre a equipa que irá desenvolver o projecto e o cliente final. Consultando vários livros relacionados com multimédia consegue-se encontrar diferentes tipos de normas para realizar esses storyboards mas a verdade é que tratando-se de uma área que tanto serve para desenvolver soluções mais vocacionadas para a animação, como soluções mais vocacionadas para a programação, não existe nenhum modelo que seja considerado o ideal e as empresas sejam levadas a criar os seus próprios modelos. Do meu ponto de vista qualquer que seja o modelo escolhido deve satisfazer sempre os seguintes requisitos:

Página 37


Existir uma descrição detalhada em forma de árvore, a hierarquia de cada menu. Existir uma maquete em suporte digital do design que se pretende para cada menu. No caso de animação deve existir em papel ou suporte digital um desenho dos

acontecimentos que ocorreram em cada keyframe.

Só depois de feitas todas as alterações que se considerem necessárias é que se passa para a fase seguinte ao Storyboard que é a elaboração das artes finais. É nesta fase de cada projecto que pode haver uma distinção clara entre as pessoas que concebem o sotryboard, as pessoas que criam as maquetes/artes finais e as pessoas que irão passar essas artes finais para uma linguagem de programação multimédia, neste caso, o FLASH. 5- Construindo ActionScript Estilo Top down

O estilo de programação Top Down é designado por método funcional, pois executa o código linha a linha até chegar à solução final, ou seja, não conhece a solução final enquanto não terminar o código que está a executar. Pode-se representar o código nos diferentes níveis em forma de árvore que se ramifica em função das escolhas tomadas.

Estilo Botton Up O estilo de programação Botton Up baseia-se em encontrar uma solução a partir dos resultados obtidos e das pistas disponíveis, pode-se comparar ao trabalho que um detective tem de realizar para solucionar um crime, devido à complexidade de se entender este estilo de programação o curso incidirá apenas sobre o estilo Top Down.

6- Exemplos Um storyboard pode ser tão simples como o seguinte exemplo:

Entrada do Site, através de uma curta animação em flash. Menu inicial

• Imagem escolhida pelo cliente, ilustrada em flash, com algum movimento. • Quem Somos

o O que é a empresa ( página com breve texto referente à empresa ) o Conselho de Fundadores ( pagina com o nome dos fundadores e links ) o Objectivos ( página com breve texto referente aos objectivos/missão) o Instalações ( fotografias das instalações e localização )

• Actividades o A decorrer ( página com breve texto referente às actividades em curso ) o Decorridas ( página com breve texto referente às actividades decorridas )

• Programas o Áreas de actuação ( página com texto referente as áreas em que actua e programas

de actuação ) • Contactos ( 1 pagina com os contactos dos vários departamentos, com diferentes emails )

Neste exemplo, define-se em traços gerais que páginas vai ter o site e que informação irá constar em cada uma dessas páginas. Desta forma consegue-se passar a ideia que se tem para o site a qualquer pessoa, tanto ao cliente como a algum outro colaborador que irá intervir na elaboração do projecto.

Página 38


7- Resumo Como vimos nas explicações anteriores, o processo de storyboarding é de extrema importância, quer para transmitir a ideia que se tem do projecto, que para nossa própria orientação durante a elaboração da aplicação. É importante também, manter actualizada uma libraria de ideias que trará vantagens a longo prazo.

8- Exercício Para treinar um pouco, propõe-se a elaboração de um storyboard que represente de uma forma clara e sucinta, todos os passos que decorreram desde o inicio desta aula até ao seu termo.

Página 39


Página 40


AULA IV – “ActionScript - Timeline Actions” 1- Introdução Nesta aula serão apresentados os scripts que se podem atribuir à timeline. “Timeline significa espaço de tempo, se comparamos a uma fita de um filme, sabemos que a fita é constituída por milhares de imagens e quando vistas a uma determinada velocidade dão a sensação de movimento, agora suponhamos que era possível parar o filme num determinado ponto e que só recomeçaria quando se executasse uma determinada acção, essas acções são os exemplos que vamos ver de seguida e a fita é a nossa timeline”. O aluno ficará também a conhecer o conceito de Labels. 2- Timeline Paths Sabendo que a timeline representa o espaço de tempo em que ocorrem as animações, interessa saber que cada uma dessas animações pode ser a representação de um objecto que também tem a sua própria timeline, assim podemos ter no mesmo programa a timeline principal e as diferentes timelines de cada objecto, parece um pouco confuso, mas se imaginarmos como estão organizadas as pastas do nosso computador sabemos que existe a raiz que pode ser c: e as pastas umas dentro das outras, no flash sucede o mesmo, existe a raiz que é o programa e que tem automaticamente uma timeline e cada objecto que pertença ao programa é como se de uma pasta se tratasse. A raiz pode ser representada por root ou por / e os objectos que são usados no programa “apenas se forem do tipo movie clips” e se tiverem um nome atribuído por exemplo: “exemplo” podem ser representados por: _root.exemplo ou por /exemplo. Então o que são as Paths? as Paths aparecem na janela do stage de forma a identificar o caminho até à timeline que está em modo de edição, permitindo regressar facilmente à timeline anterior ou mesmo à raiz.

Página 41


3- Adicionando acções básicas à Timeline A timeline pode ter várias acções associadas desde play() a acções mais complexas. As 3 primeiras acções da janela de acções são:

Go to Play Stop

A acção Play() Permite retomar a execução de um movie após uma condição de paragem criada através da acção stop(). Portanto a acção stop() permite parar a execução de um movie e a acção play() permite retomar a execução desse movie. Mas, podem estar a pensar, e se o movie parar como pode recomeçar? A acção stop() limita-se a parar a execução do filme frame a frame, ou seja, se uma animação estava a correr pára, mas os eventos do flash continuam activos, o que permite que se no frame onde foi executada a acção stop() existir um botão que desencadeie a acção play(), essa acção é executada. Outra acção que pode ser adicionada à timeline é a acção de salto Go to(), esta acção permite reencaminhar a execução das animações para rumos diferentes, como se por exemplo se uma linha de comboio que tivesse várias saídas e fosse mudando de rumo durante o percurso do comboio. Esta acção é bastante útil para a criação de menus, imagine-se um menu com duas opções, Quando se clicar na opção 1 vai-se para o frame 5, e clicando-se na opção 2 vai-se para o frame 10, desta forma só se passa pelo frame 5 quando se escolhe a primeira opção. Para se utilizar a acção Goto é necessário que essa acção seja completada com stop() ou play(), derivando assim 2 acções que são nomeadamente:

GotoAndPlay() GotoAndStop()

A primeira permite realizar saltos sem parar a execução da timeline. A segunda permite realizar saltos mas parando a execução da timeline.

4- Adicionando Labels à Timeline A possibilidade de se adicionar Labels à Timeline pode ser muito útil, a acção Go to, como vimos anteriormente permite saltar da posição actual da timeline para o frame passado parâmetro, GotoAndPlay(10), no entanto ficamos um pouco limitados se for necessário alterar a duração das animações, o que implica ter de se alterar em todos os scripts o número do frame passado por parâmetro para as acções de Salto, por forma a evitar este trabalho forçado e dando mais flexibilidade ao flash pode ser atribuída uma label a um determinado frame, para que da próxima vez que for necessário inserir uma acção de salto em vez de se passar como parâmetro o número do frame passa-se a label (nome que identifica a frame).

Página 42


5- Exemplos O próximo exemplo mostra como se pode utilizar as acções play(), stop() e gotoAndPlay()

1- No frame 1 inserir um botão e um texto, na timeline inserir o script stop();

Página 43


2. No Botão do frame 1 inserir inserir o script gotoAndPlay(10);

3. No frame 10 inserir um keyframe, botão e um texto, na timeline inserir o script stop();

Página 44


4. No Botão do frame 10 inserir inserir o script gotoAndPlay(1);

6- Resumo Nesta aula foram dados conceitos sobre as acções stop(), play(), gotoAndStop(), gotoAndPlay(), frames, e labels

7- Exercício Propõe-se o desenvolvimento de uma animação que comece no frame 1 e salte do frame 10 para o frame 5, mas utilizando labels.

Página 45


Página 46


AULA V – “ActionScript - Começando a interactividade” 1- Introdução Nesta aula vão ser transmitidas as informações necessárias para se começar a programar em ActionScript, vai-se falar de botões e como associar eventos a botões ou a movieclips. Relembrando aulas anteriores, um objecto pode ser do tipo botão, movieclip ou gráfico, um objecto do tipo gráfico é usado para inserção de imagens estáticas na root ou dentro de um movieclip, um objecto do tipo botão, como o próprio nome indica serve para criar botões que permitem captar eventos típicos dos botões e um objecto do tipo MovieClip serve tanto para inserir programas completos dentro do flash como simples animações. 2- Criar um botão Para se criar um botão deve-se fazer: Desenhar um circulo e convertê-lo para símbolo do tipo botão, clicar duas vezes seguidas

em cima do símbolo para o editar. Verificar se a timeline deixou de ter frames numerados para passar a ter apenas quatro

frames com as designações de Up, Over, Down, Hit. Seleccionar o frame Over e inserir um keyframe, o mesmo para o frame Down e Hit. Agora temos o circulo duplicado em cada keyframe, o frame Up deve conter o símbolo que

vai aparecer por defeito, o frame Over deve conter o símbolo que vai aparecer quando o rato se sobrepor a ele, o frame Down deve conter o símbolo que vai aparecer quando se clica sobre o botão e o frame Hit deve conter o símbolo que representa a área de acção que vai detectar se o cursor do rato está sobre o botão.

Agora sai-se do modo de edição do Botão, com o botão feito vamos lhe atribuir uma acção, para isso com o botão seleccionado chama-se a janela das acções, insere-se a acção pretendida, por exemplo: gotoAndStop(1);

A acção que foi atribuída ao botão deve estar inserida dentro de um evento, normalmente o flash escreve logo o código necessário para que a acção funcione correctamente, se o flash não inserisse esse código seria necessário em vez de se escrever simplesmente gotoAndStop(1); seria necessário escrever:

on (release){ gotoAndStop(1);

} Uma noção importante a ter é que a { deve estar sempre na linha do evento que a chama

porque se o script fosse escrito da seguinte forma: on (release) {

gotoAndStop(1); }

não iria funcionar. 3- Interactividade com MovieClips Uma das particularidades novas nas ultimas versões do flash é a de permitir adicionar eventos também a movieclips O processo de se adicionar um evento a um Movieclip é igual ao de se adicionar um evento a um botão, no entanto os eventos que se podem atribuir a um Movieclip podem ser muito mais complexos que os dos botões. Por exemplo, imagine-se um movie com várias animações,

Página 47


obviamente irão demorar algum tempo a carregar o que é sempre desagradável e pode levar o utilizador a distrair-se e quando dá conta já a animação começou a correr, para evitar que isso aconteça e de forma a garantir que o utilizador vê a animação toda, basta ter um botão de começar que só depois de pressionado é que a animação começa, esse botão pode aparecer depois do movie ter sido todo carregado. Como se pretende que o utilizador clique em qualquer região do ecrã para continuar pode-se fazer um botão do tamanho do stage, mas desagradavelmente iria ficar sempre visível o cursor que aparece sempre que passa por cima de um botão, para dar a volta a esse problema o ideal era ter um movieclip que permitisse comportar-se como um botão sem alterar o cursor do rato. Para se atribuir então o script ao MovieClip, o código seria:

onclipEvent(mouseDown){ // qualquer coisa

} Como se verifica, os eventos são captados de forma diferente da dos botões, num botão basta escrever onRelease enquanto que num movieclip tem de se escrever onClipEvent(mouseDown). Agora aconselha-se a ver os restantes eventos que podem ser atribuídos a um movieclip. 4- Exemplos Vou agora exemplificar a utilização dos eventos que se podem associar a botões e a movieclips para fazer um jogo muito simples, o jogo consiste em ter uma pista de automóveis, uma linha de partida e uma linha de chegada, assim que o rato clicar no botão começar tem de percorrer a pista sem que o cursor do rato saia da sua área e só termina quando chegar à linha de chegada e clicar no botão terminar.

1- Deve-se desenhar uma linha com alguma espessura e convertê-la para botão 2- Deve-se inserir um botão na linha de partida 3- Deve-se inserir um botão na linha de chegada 4- Deve-se inserir uma label chamada start, outra chamada perdeu e outra chamada

ganhou. 5- No frame 1 insere-se uma acção de stop(); 6- No botão de inicio do jogo insere-se a acção gotoAndStop(“start”);

Página 48


7- Nos frames a que dão acesso a label start deve-se atribuir ao botão que representa a pista a acção: gotoAndStop(“Perdeu”);

8- E no botão da meta insere-se a acção gotoAndStop(“Ganhou”)

9- Uma particularidade importante é a de que os eventos captados pelos botões diferem entre si, o botão de inicio, capta o evento Release, que é chamado quando se clica com o rato sobre o botão. O Botão que representa a pista, capta o evento RollOut que é chamado quando o rato sai da sua superfície. O botão de fim, capta o evento RollOver que é chamado quando o rato passa por cima do botão.

10- Agora, propõe-se ao utilizador que ponha em prática este exemplo.

Página 49


5- Resumo Nesta aula ficou-se a saber como captar os eventos que o rato desencadeia sobre botões e sobre Movieclips, ficou-se também a saber como se pode apenas com pouco código e través da captação dos eventos do rato, fazer um jogo simples. Também se ficou a saber como atribuir labels aos frames de forma a facilitar a navegabilidade entre frames.

6- Exercício Propõe-se que o aluno altere o exercício anterior e em vez dos botões de inicio e fim utilize MovieClips.

Página 50


AULA VI – “ActionScript - Truques de navegação” 1- Introdução Para completar os conhecimentos adquiridos até agora e para desvendar alguns dos segredos que alguns sites escondem, vou apresentar alguns truques que se podem utilizar para criar efeitos interessantes.

2- Botões invisíveis Um dos truques trata-se de criar botões invisíveis que podem ser facilmente colocados sobre objectos animados permitindo mascarar todo o tipo de objectos e/ou imagens. Para se criar um botão invisível o processo é igual ao de criar um botão normal, a diferença é que para se obter um botão invisível deve-se apagar todos os objectos dos frame Up, Over e Down, mantendo-se apenas o objecto no frame hit.

Depois de criado o botão pode-se visualizar no stage que o botão mudou de aparência, para um azul transparente.

Página 51


3- Ligar Cenas Por defeito quando se cria um programa em flash tem-se logo disponível uma timeline e uma Cena que aparece com a designação de scene, no entanto o flash está preparado para ter várias cenas com essa possibilidade, pode-se separar por várias cenas os links que partem de um menu, no fundo cada cena comporta-se como se de um novo programa se tratasse, com a particularidade de que se um objecto existir em várias cenas é carregado apenas uma vez contrariamente a se tivesse vários programas independentes entre si.

4- Ligar Labels Outra característica do flash é a de permitir ter várias labels, como vimos anteriormente facilitam a criação de links dentro do flash as labels podem estar dispersas por várias cenas que o flash consegue detectá-las na mesma.

5- Ligar MovieClips Os movieclips podem ser sobrepostos uns aos outros, o que está á frente ficará á frente dos outros, desta forma podem-se sobrepor animações umas às outras.

6- Ligar SWFs e Níveis Para além de se poder organizar o programa de flash através de cenas, labels e com movieclips, também se podem ter vários swfs já compilados e em tempo real carregá-los para um determinado nível como se fossem layers. O movie que chama o swf externo situa-se sempre no nível 0, o swf pode ser carregado para o nível que se quiser. Convém saber que sempre que se carrega um swf para um nível os outros swfs que possam ter sido carregados para a memória e o movie principal não param a sua execução, continuam a correm em background e se tiverem botões eles continuam a funcionar, assim é conveniente não sobrepor movies a botões. Para se carregar o swf o comando que se deve utilizar é loadMovieNum(“nome do swf, 1) o segundo parâmetro é o nível. Também se pode utilizar o comando loadMovie(“nome no movie”,”nome do swf”), é outra forma de se carregar um swf que permite substituir um movieclip que já exista no stage pelo swf. 7- Adicionar animações a botões Criar botões animados não é complicado, simplesmente possuem movieclips nos frames up, Over e Down. Uma sugestão, não insiram animações no frame hit a menos que queiram criar confusão.

Página 52


8- Janelas deslizantes Como já devem ter visto em alguns sites de flash, existem janelas que se podem deslocar dentro de um programa de flash ora não é muito complicado conseguir essa proeza. Vou então explicar como se podem criar janelas deslizantes:

1- Deve-se criar um novo movie, basta ter 800x600 pixels.

Página 53


2- Depois, Cria-se um movieclip que será a nossa janela, o Design fica à responsabilidade de cada um. Acrescenta-se também no frame 1 a acção stop();

3- Editar o movieclip da “janela” e criar um segundo keyframe no frame 2 igual ao do frame 1.

Página 54


4- Criar uma segunda layer com o nome de ícones e criar 2 ícones que representem a

opção de minimizar a janela e a opção de fechar a janela. Criar também outro ícone que represente a opção de maximizar que deve ser colocado na layer ícones na frame 2, naturalmente na segunda frame a janela deve ter uma aparência de minimizada.

5- Depois de criados todos os objectos, apenas falta atribuir nomes à labels e criar botões invisíveis sobre os ícones. Para isso criam-se keyframes nos 3 primeiros frames com a acção de stop() em cada um deles (sim no 3 primeiros frames, o ultimo irá apontar para nada, pois será o frame que é chamado pelo botão de fechar janela). Ao primeiro keyframe dá-se o nome à label de “full”.

Página 55


6- Ao segundo keyframe o nome de “small”

Página 56


7- E ao terceiro o nome de “blank”.

8- Depois Criam-se 3 botões invisíveis que devem ser colocados numa layer à frente das restantes. O botão de fechar a janela deve ter o script gotoAndStop(“close”);

Página 57


9- O botão de minimizar a janela deve ter o script gotoAndStop(“small”);

10- A barra que permite à janela deslocar-se deve ter os scripts startDrag(“”); e stopDrag();

Página 58


11- No segundo keyFrame, a única alteração a fazer é no script do botão de maximizar

que deve ter o script gotoAndStop(“full”);

12- E é tudo, se testar já tem uma janela deslizante. 9- Resumo Nesta aula ficou a saber construir botões invisíveis que podem ser aplicados a várias situações, como por exemplo à construção de janelas deslizantes como se viu no ultimo exemplo. Os conhecimentos adquiridos nesta aula vão ser bastante úteis no futuro, pois a utilização de botões invisíveis é o que mais se utiliza hoje em dia na construção de Sites.

10- Exercício Propõe-se ao Aluno que complete o exemplo anterior de forma a que a sua janela se assemelhe o mais possível ás janelas das outras aplicações, com Titulo, texto, botões de fechar, maximizar, restaurar e minimizar.

Página 59


Página 60


AULA VII – “ActionScript - Variáveis” 1- Introdução As variáveis no flash são tratadas da mesma forma que noutras linguagem de programação, existem vários tipos de variáveis: numéricas, de caracteres e booleanas. As variáveis numéricas tanto podem representar números inteiros (27 ou –15), como números com casas decimais (3,142). As variáveis de caracteres podem representar qualquer tipo de caracter e não tem limite definido, por exemplo: Sham, Hello, a1b2c3. As variáveis booleanas apenas representam 2 estados, true ou false. Quando se torna necessário guardar estes diferentes tipos de dados, em algumas linguagens de programação e necessário definir o seu tipo antes de as utilizar, em ActionScript tal não é necessário pois trata-se de uma linguagem untyped, o que representa que não é necessário especificar o tipo de dados que a variável vai guardar, para alem disso as variáveis em ActionScript podem guardar diferentes tipos de dados em momentos diferentes. 2- Literais e expressões O método mais simples para se atribuir um valor a uma variável é através do sinal (=). O método mais simples para se especificar o que se pretende guardar é através da utilização de valores literais. Então, quando se pretender guardar um nome numa variável em ActionScript chamada meunome faz-se da seguinte forma: meunome="aderito"; Neste caso "aderito" trata-se de um literal do tipo caracteres pois encontra-se entre duas aspas. Se em alternativa se pretendesse guardar um literal inteiro bastava fazer: minhaidade=27; Depois de o flash interpretar estas duas linhas de código as variáveis poderiam ser utilizadas para substituir os valores que guardaram, por exemplo se fosse escrita a seguinte linha de código: resultado=minhaidade - 10; A variável resultado passava a conter o valor 17 que é o resultado da operação 27-10. A esta ultima operação dá-se o nome de expressão pois trata-se de outra forma de atribuir valores a variáveis. É importante realçar que a gestão dos tipos de variáveis são da responsabilidade do programador pois se a=2 e b=3 então a+b=5 mas se a="fa" e b="ca" então a+b="faca" e se a="fa" e b=3 então a+b="fa3". É importante saber de que tipo são as variáveis, para evitar misturas convém que as variáveis numéricas se mantenham sempre numéricas e vice-versa.

3- Variáveis de Input Ate agora apenas se explicaram quais os tipos de variáveis existentes e como lhes atribuir valores, vamos então exemplificar com um exemplo como podem ser realmente úteis em para isso vamos guardar caracteres.

Página 61


Vai ter de se criar um campo de input, é obvio que se queremos guardar um valor que o utilizador insira terá de existir um campo de input, para isso selecciona-se o ícone de texto

E cria-se uma caixa de texto no stage

Página 62


Depois é necessário alterar o tipo de texto de static para input

Atribui-se lhe um nome

E pronto, já temos uma variável chamada nome que guarda os valores que o utilizador venha a inserir. 4- Variáveis de output Para se criar uma variável de output o processo é igual ao de criar uma variável de input em que a única diferença reside em que no tipo de variável, em vez de ser input deverá ser dynamic, crie então uma variável de output com o nome resultado.

Página 63


Agora se no flash se acrescentar um botão com o script resultado = nome + "ww" vai acontecer que o valor inserido vai aparecer no campo de output com os caracteres "ww" acrescentados. 5- Atribuir nomes às variáveis O nome que se pode dar a uma variável pode ser o que se entender desde que não colida com alguns nomes que são reservados. Os nomes que estão reservados ao flash e que não podem ser utilizados como variáveis são: break, continue, delete, else, for, function, if, in new, on, return, this, typeof, var, void, while e with. Também os símbolos: {}, ;, () não podem ser usados como variáveis. Também convém não preceder nenhuma variável com // ou com /* pois são indicadores de comentário e as variáveis não são interpretadas. Também os operadores são reservados, +-/* os espaços também não dever ser usados, deve-se optar por _ para substituir os espaços numa variável. E por ultimo uma variável não pode ser precedida de dígitos. Resumindo são representações correctas de variáveis: Vaca Menu8 Label7c Off São representações incorrectas On Label 7 6cmenu My-toys Uma nota importante é que o flash é case sensitive, ou seja, os comandos se não forem escritos correctamente em letras maiúsculas e minúsculas não funcionam, mas relativamente as variáveis já não e case sensitive. 6- Variáveis numéricas Para se utilizarem variáveis numéricas basta que o valor atribuído à variável seja um valor numérico, mas caso se pretenda criar uma variável de input que só receba valores numéricos é necessário fazer algo mais. Se analisarmos a janela das propriedades de um campo de texto do tipo input, conseguimos detectar um conjunto de botões que permitem embeber no documento final de flash, fontes e conforme se activam esses botões, dá-se ordem ao flash para embeber apenas caracteres numéricos, texto, símbolos ou todos. Portanto quando se pretender um campo de input que apenas receba valores numéricos, só se deve seleccionar o botão de embeber caracteres numéricos.

Página 64


7- Variáveis booleanas Tal como para se utilizarem variáveis numéricas basta que o valor atribuído à variável seja um valor numérico, também para se utilizarem variáveis booleanas basta atribuir o valor true ou false à variável.

8- Actionscript – Objectos, propriedades e métodos Tal como nas linguagens de mais alto nível a utilização do conceito de objectos continua a ser mais usada, também o flash permite lidar com objectos. Quando se pensa em variáveis como representações reais como por exemplo chocolates então uma caixa de chocolates pode ser considerada um objecto. Os objectos providenciam meios para guardar e manipular valores. No flash existem vários tipos de objectos mas provavelmente é o objecto movieclip que é mais facilmente entendido, assim vou começar por explicar o comportamento, propriedades e métodos desse tipo de objecto.

Página 65


Se no frame 1 inserirmos a acção a.play(); então o objecto a recebe o método play(); que lhe diz para iniciar a sua execução.

Tal como existe o método play(); existem muitos outros métodos que podem ser objectos na janela das acções “Action frame”. Sendo um objecto também dispõe de propriedades que servem para obter e/ou alterar algumas características do objecto, uma das características mais interessante é a de se obter a localização do objecto em relação ao stage sob o formato x/y. Mais adiante veremos as vantagens em manipular esta propriedade dos objectos. Se pensarmos em grande, importa dizer que um objecto do tipo movieclip pode ser um swf externo que é carregado em tempo de execução e que pode ter vários movieclips dentro de movieclips infinitamente, ora isso é muito interessante, imagine-se que se tem um documento de flash “swf” que se chama relogio.swf, nem se faz a menor ideia como foi programado apenas se sabe que é um relógio que mostra as horas, caso não esteja protegido (é possível proteger os swfs de forma a não poderem ser importados para outras aplicações de flash), pode ser utilizado na nossa aplicação de flash, exemplificando:

Página 66


9- Exemplos Deve-se criar um objecto do tipo movie clip e atribuir-lhe um nome, por exemplo relógio

No frame 1 insere-se o seguinte código: loadMovie(“relogio.swf”, “relogio”);

Página 67


E o resultado obtido será:

10- Resumo Nesta aula deram-se conceitos sobre Literais e expressões, explicaram-se quais os diferentes tipos de variáveis de Input/Output que podem ser utilizados no flash, explicou-se como atribuir nomes às variáveis e qual a diferença entre variáveis numéricas, variáveis booleanas e strings. Por último, explicou-se o conceito de Objectos e quais as suas propriedades e métodos. 11- Exercício Propõe-se a criação de um movieclip que corresponda a uma janela, tal como se vio na aula anterior, e um novo movie clip que através do script loadMovie(“janela.swf”, “janela1”); e loadMovie(“janela.swf”, “janela2”); substitua 2 moviclips pelo mesmo janela.swf. Pretende-se com este exercício que explicar a possibilidade de se reutilizar o mesmo movieclip externo várias vezes dentro de outro movieclip.

Página 68


AULA VIII – “ActionScript - Loops” 1- Introdução Neste ponto de aprendizagem, já conseguimos que o flash realize instruções básicas, saltar entre frames, controlar acções dos botões, mas ainda não lhe conseguimos dar instruções que o faça agir de uma forma inteligente. Na aula anterior aprenderam-se conceitos básicos de manipulação de variáveis, nesta aula vão ser dados conceitos de loop e da utilização de variáveis para a tomada de decisões provocando com que as apresentações de flash ajam de uma forma inteligente e que tenham comportamentos mais convincentes. 2- Tomada de decisões Em termos de tomada de decisões, o flash limita-se a um comando, o if. Este comando, pode ser complementado com else e elsif para lhe conferir mais funcionalidade. Antes de começar a explicar a estrutura if-elsif-else, vejamos como se tomam as decisões na vida real. “Eu vou hoje ao Concerto de Rock se não estiver a chover” É mais provável pensar-se assim: “Se eu tiver dinheiro suficiente e não estiver a chover, vou hoje ao concerto de Rock” Agora a decisão já não é baseada apenas na condição de não estar a chover, mas também na condição de ter dinheiro suficiente. Para se converter estas duas condições para o flash de uma forma que ele consiga entender, é necessário seguir uma determinada simbologia, como se de uma nova linguagem se tratasse. Escrevendo de uma forma simplista, o que se pretende é que o flash entenda: If (Não está a chover) and (tenho dinheiro suficiente) {Vou ao concerto} 3- “if” Então as simbologias a seguir são: Todas as condições devem começar com o comando if. Logo após o comando if deve vir entre ( parêntesis ) a condição. No final do parêntesis deve abrir-se uma chaveta {. Na linha de baixo deve vir as acções a realizar caso a condição seja satisfeita. No fim das acções a realizar deve-se fechar a chaveta }.

If ( condição ) { Acções

} No exemplo anterior, se existissem duas variáveis, esta_chover e tenho_dinheiro em que eram inicializadas a 0 e sem em algum ponto do programa fossem actualizadas, caso estivesse a chover a variável esta_chover ficava com o valor 1 e se tivesse dinheiro suficiente a variável tenho_dinheiro ficava com o valor 1, então a condição seria escrita da seguinte forma:

If (esta_chover == 0) and (tenho_dinheiro == 1) { Acções

}

Página 69


4- “elseif” Se os cálculos que o flash teria de fazer em cada condição fossem bastante demorados então, podia-se separar as condições em dois if’s, em que o segundo só era testado se o primeiro fosse verdadeiro. Nesse caso o código ficaria:

If (esta_chover == 1) { Acções

}elseif (tenho_dinheiro == 1){ Acções

} 5- “else” Para além do elsif, também se pode utilizar o comando else para executar acções sempre que a condição de if não for satisfeita com sucesso. A principal diferença ente o else e o elseif, é que só se pode usar um comando de else por cada condição de if, enquanto que o comando elseif pode ser usado quantas vezes for necessário, desde que esteja após uma condição de if e antes de alguma instrução de else. Por exemplo:

If (esta_chover == 1) { Acções

}elseif (tenho_dinheiro == 1){ Acções

}else{ Acções

} 6- ActionScript loops Um ActionScript loop existe não entre frames diferentes mas no próprio frame que contém código que lhe permite entrar em loop sem que saia desse frame. Convém advertir, que se for criado um ActionScript que num único frame contenha código que mova um objecto no stage de um lado para outro, o resultado que se iria obter não seria equivalente ao deslocamento continuo desse objecto, mas apenas a um salto da posição inicial até à posição final obtida após completar o loop. Isto deve-se ao facto de que o flash apenas actualiza os objectos do stage quando muda de frame. Portanto, a utilização de ActionScript loops é bastante útil quando se pretende realizar cálculos que necessitem de um tempo de resposta muito rápido. Como se realizam então esses loops? Tal como para as condições existe uma simbologia própria, também para se escrever código para a realização de loops é necessário respeitar uma determinada simbologia. O comando que permite dizer ao flash que vai começar uma condição de loop é o while, que pode funcionar isoladamente, exemplo:

While (a<10){ Acções

a=a+1; }

Página 70


Ou então, pode ser usado da seguinte forma:

do{ Acções

a=a+1; } While (a<10);

A diferença da primeira para a segunda forma de se escrever as condições de loop, é que a primeira condição de loop primeiro verifica se é verdadeira e só depois executa as acções, enquanto que na segunda primeiro são executadas as acções, pelo menos uma vez e só depois é testada a condição de loop. Deve-se tomar as devidas precauções de forma a evitar criar condições de loop intermináveis, pois o resultado levaria a aplicação a bloquear. Outro comando que permite criar condições de loop é o comando for, este comando é útil, sempre que se pretendam escrever condições de loop que terminem após se terminar uma sequência de valores, em vez de se ter mais duas linhas de código, que seriam necessárias utilizando o comando while, recorrendo ao comando for conseguem-se evitar essas duas linhas de código, exemplo:

contador = 0 while ( contador < 10 ) {

Acções contador++; }

A alternativa seria:

for ( contador = 0; contador < 10; contador++ ){ Acções

} 7- Arrays Um Array é uma variável que contém uma sequência numérica para localizações de memória. Em cada uma dessas localizações de memória, podem ser guardados diversos tipos de dados, na prática uma variável do tipo Array assemelha-se a um armário com gavetas, a variável identifica o armário e cada localização de memória corresponde a cada gaveta que contém dados armazenados. A sintaxe de uma variável do tipo Array é variavel[posição de memória], por exemplo se quisermos guardar um valor na posição de memória 1 da variável numeros faríamos da seguinte forma:

numeros[1] = 4;

Ao valor correspondente à posição de memória do Array costuma-se dar a designação de offset. Sempre que se atribui um valor a uma posição de memória do Array, o flash cria essa entrada, portanto se existir uma variável que lhe tenham sido atribuídos valores para a posição 1 e 4, só essas posições de memória é que foram criadas, não existe a posição de memória 2 e 3.

Página 71


Caso se pretenda definir à prior todas as posições de memória que se pretendam, então deve-se utilizar o comando new Array(número de entradas), por exemplo: numeros = new Array(5); // Foram criadas 6 entradas no array numeros, sim 6 entradas porque o zero também conta no flash. Também se podem passar valores automaticamente para a variável a criar da seguinte forma: numeros = new Array(1, 6, 4, 6); nomes = new Array(“casa”, “carro”, “mobília”); numeros = new Array(); // Neste caso, apenas se define que a variável vai ser do tipo Array. 8- Exemplos Vou exemplificar a utilização dos conceitos anteriores através da construção de um exercício que tem como finalidade calcular o factorial de um número. Relembrando o que é o factorial de uma número, corresponde a multiplicar esse número pelo seu correspondente anterior sucessivamente até chegar ao valor 1. Por exemplo, para calcular o factorial de 4 deve-se fazer os seguintes cálculos:

4 * 3 * 2 * 1 = 24 Para escrever um script simples que calcule o factorial de um número vou recorrer à recorrência, ou seja, vou chamar consecutivamente uma função enviando-lhe todos os valores que vão ser calculados, e ela me devolverá o resultado do ultimo valor a multiplicar pelo anterior. Os valores seriam passados da seguinte forma:

1- O resultado será: 4 * B, em que B = Calcula (4–1) 2- O resultado de B será: 3 * C, em que C = Calcula (3-1) 3- O resultado de C será: 2 * D, em que D = Calcula(2-1) 4- O resultado de D será: 1 5- Logo o resultado de C será 2 * 1 = 2 6- O resultado de B será 3 * 2 = 6 7- O resultado final será 4 * 6 = 24

Estas vão ser todas as iterações que a função que vou escrever vai realizar, e o processo ilustrado anteriormente chama-se recorrência, em que se pode verificar que utilizei sempre a mesma designação “Calcula”. Um outro conceito novo que vou utilizar é o recurso a funções, vou criar uma função chamada factorial que recebe como parâmetro um valor que vai ser guardado na variável numero. A função pode ser escrita da seguinte forma:

function factorial(numero){ if(numero > 0){ return numero * factorial(numero – 1);

} else { return 1; }

}

Página 72


Para além da função vou criar uma variável de input denominada de “numero” e uma variável de output denominada de “res”. Por fim, crio um botão que vai conter o script: on (release) { res = factorial(numero); function factorial(numero){ if(numero > 0){ return numero * factorial(numero – 1);

} else { return 1; }

} } Se não quisesse recorrer a recursividade, a função teria de ser escrita de outra forma, por exemplo: on (release) { res = factorial(numero); function factorial(numero){ res = 1; while(numero > 0){ res = res * numero; numero = numero–1;

} return res;

} }

Página 73


9- Resumo Nesta aula foi dado um passo importante na clarificação entre o flash e a programação em ActionScript, foram dados conceitos importantes sobre a utilização de condições e sobre a utilização de mecanismos de loop. Testou-se o primeiro exemplo de programação de alto nível. 10- Exercício Pretende-se que o aluno escreva uma aplicação que dado um número, consiga determinar se esse número é ou não um número primo, ou seja, se apenas é divisível por ele próprio e pela unidade (1).

Página 74


AULA IX – “ActionScript - Interactividade avançada” 1- Introdução Nesta aula vão ser explicados conceitos sobre classes, como manipular de objectos e qual a importância de se criar mecanismos de pré carregamento de páginas. Como já vimos em aulas anteriores, todo o conceito do flash gira à volta de objectos, quer sejam movieclips, botões ou gráficos, vimos também que cada um desses objectos possui propriedades e métodos, vimos também que em alguns casos tivemos de atribuir um nome aos movieclips de forma a os podermos manipular, a esse nome chama-se instanciação.

2- Instanciação Quando se começa a aprender na escola a ler e a escrever, primeiro aprendem-se as palavras e gradualmente vai-se passando para os conceitos de verbos e de gramática, com o flash acontece o mesmo, instancias são apenas mais um passo num processo de aprendizagem que vai ficando cada vez mais complexo. No flash, quase tudo pode ser alterado, chamando-se a esse modelo de modelo orientado para objectos. Como é que o flash funciona? Considerando os objectos elementares como gráficos, botões e movieclips, que após serem instanciados com nomes que os representem, passam a poder ser totalmente manipulados através de ActionScript, pois passaram a ter uma referencia que os identifica, a sua instancia. Sabendo que objectos do tipo botões e gráficos não podem ser instanciados a menos que se altere o seu tipo de comportamento para movieclip dá-nos a sensação que o mais importante é a instanciação, mas não é totalmente verdade. Na realidade todos os movieclips têm nomes instanciados, mesmo que não lhe tenhamos atribuído um. O flash atribui nomes automaticamente começando em instance1, ... a instancen. Se experimentarmos criar 3 movieclips e chamar o debuger, consegue-se visualizar que cada movieclip tem o seu nome instanciado.

Página 75


OK, então se o processo de se instanciar um nome aos objectos não é o mais importante, o que é? É o facto de se saber que o que se está a controlar é um movieclip, ou seja, um objecto. Sempre que existirem objectos similares, podem ser agrupados em classes.

3- Classes – métodos, propriedades, comportamentos Uma classe corresponde a um termo de programação que descreve um template para um objecto, corresponde a descrever uma lista de coisas que todos os objectos pertencentes a essa classe conseguem fazer. Uma classe chamada planta deve corresponder a um template que deve ter:

O nome da planta A altura da planta A cor da flor O mês em que a flor desabrocha O tipo de solo para a planta

Um objecto em particular do tipo planta deve ter como características todas as propriedades descritas na classe, por exemplo: roseira, 10cm, vermelha, Maio, normal. No flash cada classe tem três categorias que nos interessam:

Métodos Propriedades Comportamentos

Os métodos são instruções que se podem passar aos objectos de uma determinada classe de algo que se pretende que eles venham a realizar. Já se sabe o que esperar quando se invoca o método nome_da_instancia.play(); trata-se de um método que só se pode invocar a um objecto do tipo movieclip, não pode ser usado em botões nem em gráficos, neste caso o método a invocar chama-se play(). Já Som.setVolume(100); e numero_de_letras=frase.length; tratam-se de métodos que só podem ser invocados a objectos de certas classes. No primeiro caso o método setVolume serve para alterar o volume do som de um objecto pertencente á classe chamada som, no segundo caso trata-se de obter o número de caracteres de um objecto pertencente à classe string. Como se pode constatar pelos exemplos anteriores, a invocação de métodos processa-se sempre da mesma forma, nome_da_instancia.<método><argumentos>; A única complicação no meio disto tudo, é que para se poder invocar alguns métodos em alguns movieclips, é necessário escrever o caminho até ao objecto. Relembrando as paths dadas nas primeiras aulas, alguns movieclips para poderem invocar métodos de outros movieclips que estejam fora da árvore geneológica a começar no movieclip que pretende invocar o método, torna-se necessário escrever o caminho todo até ao movieclip pretendido, exemplo: root.nome_do_movieclip.metodo. Resumindo: path.nome_da_instancia.<método><argumentos> As propriedades são pedaços de informação que juntos definem tudo o que pretendemos saber sobre um membro da classe. Relembrando a classe planta, era composta por 5 valores, em programação as propriedades podem dar mais informações para além daquelas que foram criadas na classe. Uma propriedade pode representar um determinado valor de um objecto ou pode representar algo que pretendemos que o objecto realize.

Página 76


Por exemplo, se definirmos uma classe denominada sprite, podendo ter como propriedades, o nome, a posição no eixo dos xx, yy, a velocidade e direcção sobre o eixo dos xx e yy, se o sprite atingiu outro e o nome do outro sprite que foi atingido, podemos obter facilmente os valores dessas propriedades, atribuindo-os a variáveis e/ou escrever outras propriedades que alterem esses valores. O flash possui uma lista de propriedades que se podem obter e/ou manipular acedendo à janela das Properties -> Actions. Importa referir que a maior parte dessas propriedades só podem ser usadas em objectos do tipo movieclip. Os Comportamentos correspondem à forma como os objectos realizam determinadas acções, no flash todos os objectos da mesma classe possuem o mesmo tipo de comportamentos o que torna o processo de programação bastante simplificado, pois espera-se que um objecto do tipo movieclip se comporte como um filme, com frames, que corra a x frames por segundo etc... Não á muito mais a dizer sobre os comportamentos, excepto se pretendermos animar um objecto do tipo gráfico, face às suas características, a única forma é a de alterar o seu tipo de comportamento de botão para movieclip.

4- Definição de objectos (Movieclips, objectos não gráficos) Um objecto em flash corresponde a uma classe que foi inicializada para incluir uma série de propriedades que a torna única.

Página 77


Por exemplo, enquanto um movieclip se encontra na libraria de objectos, apesar de ser uma classe não possui quaisquer propriedades, mas assim que é arrastado para o stage, são lhe atribuídas automaticamente uma série de propriedades (ganha logo as propriedades correspondentes à classe sprite, “posição x, y”), o mais importante é o nome da instancia que não se sabe qual é até se lhe atribuir um nome, enquanto não se atribuir uma instancia ao objecto, não se pode invocar os seus métodos, portanto instancias são diferentes de objectos, é importante ter essa noção bem presente. Para além dos objectos que já foram apresentados anteriormente, existem outro tipo de objectos, objectos que podem ser criados através de ActionScript, a esses objectos costumam chamar-se objectos não gráficos. Objectos não gráficos podem ser por exemplo:

letras = new Array(10); som = new Sound();

Ambos os comandos seguem a mesma regra, um objecto passa a existir assim que lhe for atribuído um nome. Agora que já se adquiriram conhecimentos sobre classes, objectos, propriedades, métodos e comportamentos, pode-se começar a criar realmente bom material. 5- Interactividade Avançada e propriedades dos objectos Podemos usar todo o conhecimento adquirido sobre a estrutura do flash de forma a ter controlo directo sobre o que acontece no interior do flash através de ActionScript. Já não é necessário preocuparmos com “tween animations” porque tudo pode ser feito através de código com garantias de um controlo mais elevado usado ActionScript. Começando por exemplificar o poder deste método vejamos com dois exemplos, preloads e cache.

6- Preloads e Cache A maior parte dos iniciantes gosta de ter preloads nos seus sites, mas na maior parte das vezes confundem o preload com um intro, inserindo os preloads dentro de intros pesados levando muitas vezes o utilizador a não esperar pelo botão de skip intro e a abandonar o site. Então o ideal é ter um intro que enquanto decorre, o flash vai carregando o menu do site. Mas o que acontece se o utilizador clicar no botão de skip intro, ou porque não lhe apetece visualizar o intro, ou porque já o viu anteriormente e o menu ainda não ter carregado? É para evitar que isso aconteça que deve existir o preload, mas no menu principal e que informe do progresso do carregamento desse mesmo menu. Desta forma, evita-se fazer preload do intro e do menu, tornando o preload demorado, consegue-se que durante o intro o menu vá carregando para a cache e caso o utilizador clique no botão de skip intro antes do menu estar totalmente carregado em cache, entra em funcionamento o preload. Como na maior parte das vezes os designers não conseguem manipular formas de fazer preload de objectos no flash gradualmente, optam por fazer um site em que apenas o menu principal é feito em flash e cada link redirecciona para uma janela em html ou flash, o que torna as coisas um pouco confusas. Para dar a volta a esta questão o truque é muito simples: Deve-se criar um menu bastante leve, apenas com objectos que representem a zona dos menus e da informação, esses objectos devem ser do tipo movieclips.

Página 78


Depois insere-se nessa página um préload para garantir que todo o flash é carregado em cache e todos os scripts vão funcionar nos respetivos sítios. E por fim faz-se o load de cada movie para os respectivos locais. 7- Exemplos Um dos processos mais simples de se programar um mecanismo de préload numa página, é por exemplo ter uma animação a dizer “a carregar, aguarde .....” e um keyframe no frame 1,2 e 3 respectivamente. Na timeline, no keyFrame 2 coloca-se o script:

ifFrameLoaded (<número máximo de frames>){ gotoAndPlay(4); }

E no frame 3, o script:

gotoAndPlay(2);

Página 79


Outro processo mais profissional, é através da utilização de processos de loading com informação ao utilizador da percentagem de elementos carregados estimando o tempo que falta para terminar de carregar o resto da página.

Página 80


Por exemplo, se na frame 1 tiver-mos o script

/:time0 = getTimer(); /:loaded0 = _root.getBytesLoaded(); /:total0 = _root.getBytesTotal();

Passamos a ter nessas 3 variáveis respectivamente o tempo de inicio da aplicação de flash na variável time0, a variável loaded0 vai sendo actualizada constantemente com o numero de bytes já lidos para a cache e a variável total0 vai conter o numero total de bytes que vão ser necessários carregar para cache, quando a variável loaded0 for igual à variável total0, a aplicação de flash já está toda em cache e pode prosseguir com as restantes animações.

Página 81


No frame 2 pomos o script:

/:iteration = number(/:iteration)+1;

Esta variável vai contar o numero de loops que já decorreram, para que através dessa variável e do tempo já decorrido se possa estimar o restante tempo que falta para carregar o resto do movie.

Página 82


No Frame 3 é que vai ser necessário inserir o maior conjunto de scripts:

/:timer1 = getTimer(); /:loaded1 = _root.getBytesLoaded(); /:loaded2 = int(number(/:loaded1)/1000); /:timesum = number(/:time1)-number(/:time0); /:loadsum = number(/:loaded1)-number(/:loaded0); /:avtimesum = number(/:timesum)/number(/:iteration); /:avloadsum = number(/:loadsum)/number(/:iteration); /:conectionspeed = int((number(/:avloadsum)/number(/:avtimesum))*10)/10; /:percent = int((_root.getBytesLoaded()/_root.getBytesTotal())*100); setproperty(“_root.loadbar”,_yscale,number(/:percent)); setproperty(“_root.loadbar2”,_xscale,number(/:percent)); /:timerleft = (int((number(/:total)-number(/:loaded1))/number(/:connectionspeed)/100))/10; if(_root.getBytesLoaded()==_root.getBytesTotal()){

_root.gotoAndPlay(“site”); }else{

gotoAndPlay(“loop”); }

Todas estas linhas de código servem para actualizar o valor das variáveis identificadas por /: que podem ser utilizadas como se desejar.

Página 83


E por fim, na frame 5 põe-se por exemplo o script gotoAndPlay(“20”); para avançar para as animações propriamente ditas. 8- Resumo Nesta aula deram-se conceitos sobre instanciação, objectos, métodos, propriedades e como manipular a cache programando mecanismos de préload.

9- Exercício Pretende-se que o aluno crie uma nova scene numa das aplicações já desenvolvida em aulas anteriores e que programe um mecanismo de préload nessa scene.

Página 84


AULA X – “ActionScript – ActionScript Modular, processos de clonagem, teoria dos jogos” 1- Introdução Nesta aula vou apresentar um exemplo em veremos o flash a funcionar em todo o seu potencial, vou explicar como se podem criar objectos que tenham comportamentos diferentes simultaneamente no mesmo espaço de tempo e que ao mesmo tempo o utilizador tenha controlo absoluto sobre um desses objectos. O exemplo que vou usar para exemplificar todos os passos necessários para o efeito, será o da realização de um jogo que consiste em ter várias naves inimigas e uma nave que possa ser controlada pelo utilizador. Durante a explicação de cada passo a realizar para a concepção do jogo irá permitir ao aluno ficar a conhecer mais algumas características do flash para manipulação de objectos. O exemplo vai ser enviado ao aluno por email, para que o possa testar e melhor compreender todo o processo.

2- Conceitos sobre jogos, Exemplo: Existem vários conceitos sobre esta matéria, mas vou explicar apenas o necessário para se compreender como se vai realizar o jogo. Praticamente vão existir dois grandes comportamentos no jogo, aqueles que são desencadeados pela acção do utilizador e aqueles que são desencadeados automaticamente pelo sistema. Relativamente aos acontecimentos que vão ser desencadeados pelo utilizador temos a mudança de posição da nave boa e o disparo de balas, relativamente aos acontecimentos desencadeados pelo sistema temos a mudança de posição de cada nave inimiga e o disparo de balas. Podemos partir do pressuposto de que se o utilizador mover o rato, a nave boa deve mover-se sobre o eixo dos xx na medida correspondente ao deslocamento do rato e se o utilizador clicar no rato deve ser criado um objecto bala boa. Quando a bala boa é criada, deve ter como propriedades a sua posição no eixo dos xx yy e a qual a próxima acção que deve realizar. O mesmo se passa em relação a cada nave inimiga, quando o sistema as cria pela primeira vez deve-lhes atribuir propriedades correspondentes à sua posição no eixo dos xx yy e qual a próxima acção a desempenhar. Tudo isto é muito interessante, mas como fazer com que cada nave e balas interajam ao mesmo tempo? O processo é muito simples, imagine-se que cada acção acontece num determinado espaço de tempo, a bala e as naves alteram as suas posições simultaneamente, criando nesse mesmo momento a sua próxima acção a realizar que pode ser mover ou morrer ou criar um novo objecto. Pode estar a parecer um pouco confuso, será mais fácil começar a visualizar-se algo. 3- Criar os objectos Vamos começar por criar os actores do nosso filme A nave boa A nave inimiga A bala boa A bala inimiga

Página 85


4- Criar o script que coloque todos os objectos nas posições correctas e que iniciasse todas as variáveis que vão ser utilizadas: // inimigo = 3,2,1 // bala = 5 var obj_num; var objectos_number; var number_objectos; var n_obj_inimigos; Esta função vai permitir que a função Initialize() só seja executada uma vez if (!initialized) { Initialize(); initialized = true; } Esta função vai inicializar as variáveis e criar as naves inimigas function Initialize () { n_obj_inimigos = 0; obj_num = 0; objectos_number = []; // num + tipo + accao number_objectos = 0; cria_inimigo(30, 50); // A função cria_inimigo vai criar uma nave inimiga e põe-na na posição x/y relativamente ao stage, passada por parâmetro cria_inimigo(100, 50); cria_inimigo(170, 50); cria_inimigo(240, 50); } Esta função vai criar uma bala boa, nesta função vai-se ver pela primeira vez que todos os objectos devem ter uma instancia e essa instancia deve ser guardada num repositório de objectos. Neste caso o repositório trata-se de um vector que por cada objecto deve guardar 3 valores, o primeiro valor deve corresponder a um número único, para isso uso uma variável obj_num que por cada objecto criado é incrementada um valor. Deve existir uma variável que guarde o número de objectos que já foram criados e estão guardados no repositório de objectos, trata-se da variável number_objectos, é essa variável que vai permitir evitar que se guardem objectos no vector objectos_number em posições onde já existam outros objectos. Define-se também que todas as balas boas devem ter a instancia igual a b1, b2, b5, ..., bn Para isso, atribui-se a uma variável auxiliar o nome que se pretende utilizar para identificar o objecto bala que vai ser criado, chamei-lhe name. Portanto se fizer name=”b”+obj_num; a variável name poderá ficar com o valor “b7” por exemplo. Depois vou duplicar o movieclip que corresponde ao objecto bala e que lhe atribui uma instancia chamada “b”, o método que vou utilizar para esse efeito é o método “duplicateMovieClip(<nome da instancia a criar>, <Numero do objecto>)”.

Página 86


Então, através do código b.duplicateMovieClip(name,obj_num); vou obter um novo movieclip, colonado a partir do movieclip “b” e dou-lhe o nome passado por parâmetro na variável “name”, bem como um identificador único passado pela variável “obj_num”. Depois de criar o objecto, necessito de criar uma variável que possa manipular as propriedades desse objecto, então para criar essa variável o flash fornece a função eval(), fazendo var newPiece = eval(name); corresponde a criar uma variável chamada newPiece que instancia com o objecto chamado “b7” se for esse o valor da variável “name”. Depois de ter a variável “newPiece” já posso invocar os métodos do objecto e alterar as suas propriedades. As propriedades que me interessam alterar, são a posição da bala relativamente ao eixo dos xx e yy e como eu quero criar a bala a partir da posição actual da nave boa, tenho de atribuir as propriedades do objecto nave à bala, para isso faço newPiece._x = nave._x e newPiece._y = nave._y-10 . Como vimos em lições anteriores, a propriedade _x e _y correspondem a propriedades de movieclips que nos dão a posição do movieclip em relação ao stage. Depois de criar a bala e de a colocar na posição correcta, só falta guardar esse novo objecto no repositório de objectos, para isso uso o código: “objectos_number[number_objectos*3]=obj_num;” para guardar o numero do objecto. “objectos_number[number_objectos*3+1]=5;” para guardar o tipo de objecto. “objectos_number[number_objectos*3+2]=1;” para guardar qual deve ser a próxima acção que o objecto deve realizar. O valor 5 passado como segundo parâmetro corresponde a dizer ao sistema quando estiver a percorrer o repositório de objectos, que o objecto é uma bala, cada tipo de objecto tem o seu número próprio. O valor 1 passado como terceiro parâmetro corresponde à acção que o objecto deve realizar quando o motor do sistema as pretender realizar, cada objecto pode ter a sua linguagem própria, neste caso o valor 1 corresponde a dizer que a bala deve deslocar-se na posição vertical ascendente um determinado número de pixels. // Bala = 5 function cria_bala () { obj_num++; number_objectos++; var name = "b"+obj_num; b.duplicateMovieClip(name, obj_num); var newPiece = eval(name); newPiece._x = nave._x; newPiece._y = nave._y-10; newPiece.PieceNumber = obj_num; objectos_number[number_objectos*3] = obj_num; objectos_number[number_objectos*3+1] = 5; objectos_number[number_objectos*3+2] = 1; } Esta função vai criar uma bala inimiga, todo o processo é semelhante ao usado para criar a bala boa, vejamos que as diferenças apenas se baseiam no nome das instancia para o objecto bala inimiga que é “bala_inimiga” e o número que identifica o tipo de objecto que é “6”. // Bala inimiga = 6 function cria_bala_inimiga (inimigo) { obj_num++; number_objectos++; var name = "bala_inimiga"+obj_num; bala_inimiga.duplicateMovieClip(name, obj_num); var newPiece = eval(name); newPiece._x = inimigo._x; newPiece._y = inimigo._y; newPiece.PieceNumber = obj_num;

Página 87


objectos_number[number_objectos*3] = obj_num; objectos_number[number_objectos*3+1] = 6; objectos_number[number_objectos*3+2] = 1; } Esta função vai criar uma nave inimiga. // inimigo = 3 function cria_inimigo (x, y) { n_obj_inimigos++; obj_num++; number_objectos++; var name = "inimigo"+obj_num; inimigo.duplicateMovieClip(name, obj_num); var newPiece = eval(name); newPiece._x = x; newPiece._y = y; newPiece.PieceNumber = obj_num; objectos_number[number_objectos*3] = obj_num; objectos_number[number_objectos*3+1] = 3; objectos_number[number_objectos*3+2] = 1; } 5- No mesmo frame as funções que correspondem aos métodos de cada objecto Esta função vai executar os métodos do objecto bala inimiga e devolver um valor que identifica a acção a executar da próxima vez. O valor “j” passado por parâmetro corresponde ao identificador para o objecto, que permite saber a sua posição automaticamente do repositório de objectos. Uma função nova é a função check_perigo() que vai tentar saber se a bala acertou ou não na nave boa. function f_bala_inimiga (j) { // 1 - Desce // 2 - Desaparece var name = "bala_inimiga"+objectos_number[j*3]; var newPiece = eval(name); newPiece._y = newPiece._y+20; if (newPiece._y>500) { return -1; } if (newPiece._y>435) { return check_perigo(newPiece._x); } return 0; } Esta função vai executar os métodos do objecto bala boa tal como a função anterior para as balas inimigas. function f_bala (j) { // 1 - Sobe // 2 - Desaparece var name = "b"+objectos_number[j*3]; var newPiece = eval(name); newPiece._y = newPiece._y-20; if (newPiece._y<20) { return -1; } if (newPiece._y<100) { return check_colisao(j, newPiece._x); } return 0; } Esta função recebe dois identificadores para dois objectos e vai tentar calcular se esses objectos colidiram ou não, se sim devolve um valor se não devolver 0. Esta função apenas se aplica à bala boa em conjunto com as naves inimigas. function check_colisao (j, x) { for (l=1; l<=number_objectos && l<>j; l++) { if (objectos_number[l*3+1]<=3) {

Página 88


cria_bala(); } 6- Funções auxiliares Para simplificar o código criaram-se algumas funções auxiliares que ajuda a compreender todas as linhas de código. As acções são “Acção()” que invoca os métodos do objecto passado por parâmetro e devolve a próxima acção desse objecto. function Accao (j) { if (objectos_number[j*3+1] == 5) { return f_bala(j); } // Bala boa if (objectos_number[j*3+1] == 6) { return f_bala_inimiga(j); } // Bala inimiga if (objectos_number[j*3+1]<=3) { return f_inimigo(j); } return 0; // inimigo } “Delete()” que remove um objecto através do método removeMovieClip(), é útil para remover naves inimigas que tenham sido atingidas e balas que já não interessem. function Delete (x) { // Remove bala if (objectos_number[x*3+1] == 5) { var name = "b"+objectos_number[x*3]; var newPiece = eval(name); newPiece.removeMovieClip(); } // Remove bala inimiga if (objectos_number[x*3+1] == 6) { var name = "bala_inimiga"+objectos_number[x*3]; var newPiece = eval(name); newPiece.removeMovieClip(); } // Remove inimigo if (objectos_number[x*3+1] == 0) { var name = "inimigo"+objectos_number[x*3]; var newPiece = eval(name); newPiece.removeMovieClip(); } remove(x); } Para além de se removerem os objectos do stage, também é necessário remover o seu registo do repositório de objectos, é o que faz a próxima função. function remove (Pos) { posicao = Pos; for (j=Pos; j<=number_objectos-1; j++) { objectos_number[j*3] = objectos_number[j*3+3]; objectos_number[j*3+1] = objectos_number[j*3+4]; objectos_number[j*3+2] = objectos_number[j*3+5]; } objectos_number[j*3] = "null"; objectos_number[j*3+1] = "null"; objectos_number[j*3+2] = "null"; number_objectos--; }

Página 90


7- Motor do jogo A função mais importante é esta, é a função que faz com que tudo funcione e, como se pode constatar são apenas 4 linhas de código. Esta acção está constantemente em loop, quanto mais rápido melhor, ela invoca os métodos de todos os objectos e só depois é que é feito o refresh ao ecrã passando para o frame seguinte, desta forma, sempre que o ecrã é actualizado todos os objectos já foram actualizados o que dá a sensação de que todos se movem ao mesmo tempo. function Accoes () { for (j=1; j<=number_objectos; j++) { if (Accao(j) == -1) { Delete(j); } } } 8- Variáveis e funções que devem ser invocadas sempre que se entra no frame Para que tudo funcione, é necessário que sempre que o flash entra neste frame execute a função Accoes() e actualize as variáveis pos_x e mouseh e actualize a posição do objecto nave em relação aos valores lidos pela variável mouseh correspondente à posição do rato em relação ao eixo dos xx pos_x = getProperty("/cenario", _x); mouseh = getProperty("/cenario", _x); setPrope y ("/nave", _x, mouseh); rtAccoes(); 9- Resumo No final desta aula o aluno já adquiriu todos os conhecimentos necessários para desenvolver boas soluções em flash. Através da manipulação de objectos em tempo real, torna-se possível manipular o flash em tempo de execução, sem ser necessário recompilar o projecto. 10- Exercício Pretende-se que o aluno com base no exemplo do jogo anterior, faça o seu próprio jogo em que vários objectos sejam criados por ActionScript através da clonagem de MovieClips e que ambos se movam simultaneamente.

Página 91


Página 92


AULA XI – “ActionScript - PHP” 1- Introdução Actualmente o futuro dos Sites, passa pelo dinamismo e por manter a informação constantemente actualizada, para isso existem várias linguagens de programação que permitem gerar páginas HTML a partir de conteúdos retirados de Bases de Dados. De entre todas as linguagens, as mais conhecidas são o ASP da Microsoft, JSP, XML e PHP. A que vou utilizar para explicar as potencialidade que o flash tem na construção de conteúdos dinâmicos, vai ser o PHP devido à sua compatibilidade entre vários sistemas operativos e por não ter custos de licenças. Como é conhecido, a maioria dos sites que podem ser actualizados a partir de bases de dados, tem de apresentar as páginas em HTML ficando algo limitadas em termos de animação. Ora isso já não tem de ser verdade, o flash já dispõe de todas as ferramentas necessárias, para que os seus conteúdos possam também ser actualizados a partir de bases de dados, que se tratem de conteúdos de texto ou imagem. 2- Interacção entre o Flash e o PHP Como é que se actualiza então um pedaço de texto no flash, após ter sido compilado? O processo é simples e único, o flash dispõe de um método que lhe permite enviar e receber valores de variáveis através de POST ou GET. Quando se chama uma página HTML através do método POST, todos os valores contidos nas variáveis do flash, são passadas para essa página, e todos os valores dessa página podem ser passados para o flash. Desta forma, conseguem-se passar valores e receber valores, é tudo o que é necessário para tornar os conteúdos do flash, actualizáveis após a sua compilação. 3- O que é o PHP Antes de avançar mais convém transmitir alguns conhecimentos básicos de PHP para que mais facilmente se possa tirar o total partido das suas potencialidades. Um página de php é equivalente uma página HTML apenas difere na extensão .php que permite ao servidor web chamar o plugin correspondente que irá interpretar todos os comandos de php que estejam embebidos no ficheiro. Para que o servidor saiba distingir os comandos de php do resto da página, é necessário que esses comandos estejam inseridos na página entre dois comandos especiais que dão a indicação de começo de código php e de fim de código php. Esses comandos são respectivamente <?php para dar indicação de inicio de código php e ?> para dar a indicação de fim de código php. Portanto, se tivermos uma página HTML e lhe pretendamos adicionar comandos de php, teria de se alterar a extensão do ficheiro para .php e inserir o código php da seguinte forma:

<html> <body>

..... <?php

// instruções de php ?> </body> </html>

Página 93


As instruções de php podem ser inseridas em qualquer região da página, não tem de ficar dentro das tags <body> </body>. 4- Comandos básicos de PHP De entre todos os comandos do php, aquele que mais interessa é o que permite escrever dados na página, esse comando é echo ”qualquer coisa”; Todos os comandos de php devem terminar com ponto e virgula ; . O comando php permite escrever na página a string que lhe é dada por parâmetro, ou os valores contidos em variáveis, por exemplo: $a=”texto”; echo $a; Mais uma novidade, as variáveis são definidas com o caracter $, sempre que se pretenda utilizar uma variável, deve começar por $. Tal como vimos na definição de variáveis para o ActionScript, também o php não necessita que se definam os tipos de variáveis, pode-se perfeitamente atribuir o que se quiser a uma variável, desde números, caracteres a objectos sem que se tenha de definir o tipo de variável. Relativamente ao php pouco mais será necessário abordar para se começar a criar páginas em flash que interajam com o php.

5- Exemplos Se quisermos ter uma página que envie uma string para uma página de flash, bastaria fazer: No flash ter uma variável chamada nome. Criar um botão no flash que executasse o script: loadVariables("nomes.php", "/", "POST"); Em que a página nomes.php teria apenas o seguinte código: &nome=<?php echo “Meu nome”; ?> O &nome corresponde à variável que é enviada da página de php para o flash e “Meu nome” é a string que é passada como parâmetro. Portanto, o flash vai receber uma variável chamada nome como o valor “Meu nome”, como o flash já dispõe de uma variável com esse nome, então essa variável é instanciada com a variável passada por parâmetro. Por outro lado, se essa variável já contivesse algum valor, após a chamada da função loadVariables, o php receberia o valor da variável que podia utilizar bastando por exemplo fazer echo $nome;. Como vimos é muito fácil enviar valores do flash para o php e vice versa. Na próxima aula será dado um exemplo da passagem de parâmetros entre o flash e o PHP

6- Resumo Nesta aula deram-se conceitos básicos sobre linguagens de programação dinâmicas, no caso concreto do PHP, deram-se ainda algumas luzes sobre a passagem de valores entre o flash e o PHP 7- Exercício Propõe-se que o aluno escreva em PHP uma função que calcule o factorial de um número, esse número é dado como parâmetro ao abrir a respectiva página, por exemplo: http://localhost/factorial.php?numero=4

Página 94


CAPITULO XII – “ActionScript – troca de informação com Bases de Dados” 1- Introdução Vimos na aula anterior como transferir valores entre o flash e uma página de php e vice-versa, mas essa troca de informação só é realmente útil de o objectivo for o de actualizar páginas de flash com dados dinâmicos, que estejam em constante actualização. Estou a falar por exemplo num site de comércio electrónico em que o preço dos produtos pode mudar a qualquer momento, a solução para um site desse género, actualmente, passa por criar páginas em tempo real, que podem ser por exemplo em php, caso se pretendesse que o site fosse em flash, sempre que necessitasse de se alterar os preços dos produtos tinha de se gerar novamente os swfs, mas com a possibilidade de troca de informações entre o flash e uma página de php isso já não é verdade, pode-se ter um site de comércio electrónico totalmente desenvolvido em flash e sempre que o preço dos produtos se altera numa base de dados, também eles se alteram na página.

2- Como utilizar o PHP para trocar informações com Bases de Dados A troca de informações entre o php e o flash, como vimos anteriormente é feita de uma forma muito simples, basta escrever na página a variável que vai ser actualizada e o respectivo parâmetro &variavel=”parâmetro”. Todo o trabalho de obter os valores da base de dados é realizado pelo php, para exemplificar esse processo, vou recorrer a exemplos com bases de dados MySql. Considerando que já existe uma base de dados mysql e uma tabela de nomes com o campo ID e o campo nome.

FLASH PHP

SITE

Para se criarpágina com o <?php

$hos $dat $use $pas $t die(mysql_e mys $que

Página 95

BDnome

uma página php que leia valores de uma base de dados MYSQL, basta ter uma seguinte código:

tname_t = "127.0.0.1:3306"; abase_t = "nome_da_base_de_dados"; rname_t = "root"; sword_t = "password";

= mysql_pconnect($hostname_t, $username_t, $password_t) or rror()); ql_select_db($database_t, $t); ry_Recordset1 = "SELECT * FROM nome";


$Recordset1 = mysql_query($query_Recordset1, $t) or die(mysql_error()); $row_Recordset1 = mysql_fetch_assoc($Recordset1); $totalRows_Recordset1 = mysql_num_rows($Recordset1); ?> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <?php echo $row_Recordset1['Nome']; ?> </body> </html> <?php mysql_free_result($Recordset1); ?> Para se passar o valor obtido pela variável Nome para o flash, como se viu em aulas anteriores basta escrever echo &nome=$row_Recordset1['Nome']; 3- Cuidados a ter com o delay das comunicações No meio deste processo todo existe um factor que pode pôr em causa o bom funcionamento das comunicações entre o flash e as bases de dados, trata-se nomeadamente do delay das comunicações. Para evitar que o programa de flash mostre uma página antes de ter recebido os valores da base de dados, tem de se garantir que essa página só aparece depois do flash receber todos os valores da página de php. Para isso deve-se iniciar uma variável com um valor 0 e que ficará em loop até que o php lhe envie essa variável com o valor 1 junto com os valores das outras variáveis, a melhor forma de se entender o processo é através de exemplos 4- Exemplos Vou exemplificar como receber um texto que esteja dum ficheiro de texto. Primeiro vou criar um ficheiro de texto onde vou escrever o seguinte código:

&texto=bla bla bla &fim=1

o “&” representa uma variável, a variável texto será usada pela aplicação de flash para apresentar o texto passado por parâmetro que neste caso é “bla bla bla” e a variável fim devolve o valor 1 para que o flash saiba que já recebeu todos os valores que tinha a receber.

Página 96


Depois de escrever o código indicado em cima, grava-se esse ficheiro com o nome “texto.txt” para a mesma pasta onde será guardado o ficheiro compilado .swf

Depois cria-se um ficheiro em flash, pode-se lhe dar o nome de browser e criam-se keyframes nas frames 1,2,3,4 e 5

Na primeira frame inicia-se a variável fim com o valor 0

Na segunda frame chama-se a função interna do flash chamada: loadVariables (<nome do ficheiro>,<destino>,<método>)

Página 97


É através desta função que podem ser passados os valores das variáveis do flash para uma outra página ou dessa página para o flash.

Na frame 4 verifica-se se já se receberam os valores das variáveis e enquanto não se receberem fica em loop.

Por fim atribui-se à nossa variável o valor recebido por parâmetro identificado pela variável “texto”. Pelo exemplo anterior constata-se que é muito fácil enviar valores entre o flash e uma página de texto, se em vez da página de texto texto.txt fosse um página de php o processo era exactamente o mesmo, apenas se teria de ter o cuidado de que o php para enviar valores para o flash deveria fazer echo “&nome_da_variável=”.$valor_pretendido; Simultaneamente todas as variáveis que estivessem na aplicação de flash ficariam disponíveis no flash, por exemplo, a variável $fim no php já teria o valor 0 que foi anteriormente instanciado no flash.

Página 98


5- Resumo Nesta aula foram dados conceitos de PHP e como é fácil enviar valores entre o flash e o PHP e vice-versa. A partir de agora é só por a imaginação a funcionar em que tudo é possível, o aluno já possui conhecimentos para construir um site todo em flash, mesmo que os textos sejam actualizados dinâmicamente. 6- Exercício Para testar os conhecimentos adquiridos, propõe-se ao aluno que escreva uma solução que permita mostrar numa página de flash, os valores que constem numa base de dados, por exemplo mysql. Para facilitar propõe-se que seja criada uma tabela em mysql de nomes com o campo ID do tipo autonumber e o campo nome do tipo “blob” que quer dizer “binário”. O layout da aplicação de flash fica ao critério do aluno.

Página 99


Página 100


AULA XIII – “Action Script – Compatibilidade/Conflitos” 1- Breve introdução Nesta aula, a matéria a apresentar será um pouco mais ligeira e genérica, pois o aluno já adquiriu todos os conhecimentos de base para desenvolver qualquer solução em flash, serão apresentados alguns pontos de carácter genérico e falar-se-á sobre as novas plataformas de comunicação via internet. 2- Compatibilidade entre diferentes sistemas operativos e browsers Como se sabe, existem aplicações que só são compatíveis com Windows 98 outras com Windows NT outras com sistemas Linux e outras com sistemas Macintosh. Relativamente ao Flash ActionScript, a compatibilidade entre sistemas operativos está à partida garantida, basta compilar a aplicação para swf e abrir esse swf num Web browser. É necessário no entanto que o browser tenha instalado o respectivo plugin para poder mostrar a aplicação de flash. Para garantir que os browsers que não disponham desse plugin, o possam instalar automaticamente, convém indicar na página o endereço onde a instalação do plugin está disponível. Normalmente custuma-se usar dois processos em conjunto para garantir que a instalação é feita. O primeiro é que na página de html esteja um flash onde seja indicado o endereço

onde o plugin pode ser encontrado:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%"> <param name="movie" value="site.swf"> <param name=quality value=high> <embed src="site.swf" width="100%" height="100%" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed> </object>

O segundo passo a dar é fazer uma página de index.html que tenha apenas um flash

que chame outra página, e a mesma página de html tenha um script feito em JavaScript que abra outra página ao fim de 5 segundos. Desta forma, se o browser não tiver o plugin do flash instalado, não consegue abrir a página indicada pelo flash, logo, ao fim de 5 segundos vai chamar outra página que será a versão sem flash.

No entanto, apesar das técnicas indicadas em cima, podem existir browsers que tenham instalados plugins de versões anteriores àquela que é necessária para que a aplicação de flash corra na perfeição. Nesses casos é necessário que no flash se detecte a versão do plugin e então decidir se é ou não necessário instalar uma versão mais recente. O script que permite detectar a versão do flash é:

Página 101


_root.versao = getVersion().split(",",1); if(string(_root.versao) == "WIN 6" || string(_root.versao) == "MAC 6"){ getURL("site.html"); } else{ getURL("noFlash.html"); } 3- Problemas com alguns browsers Em relação à utilização do flash em browsers que possuam o plugin instalado, não são conhecidos problemas, no entanto o mesmo já não acontece quando se pretende criar interactividade entre o flash e bases de dados. O processo de passagem de parâmetro é feito através da função:

loadVariables (<nome do ficheiro>,<destino>,<método>), por exemplo: loadVariables (“texto.php”,”/”,”post”);

Este processo funciona para a maioria dos browsers, mas foi detectado que se o broser fôr o Nestacape, então em vez de o método ser “post” deverá ser “get” o que obriga ou a ter duas versões uma para o Netscape e outra para os outros browsers ou então acrescentar algo ao script que permita identificar qual o browser que está a suportar a aplicação de flash antes de invocar a função loadVariabels 4- Novos interfaces (Pocket PC)

Cada vez mais o acesso à Internet deixa de ser obrigatório ser feito através de um PC, já existem inúmeras soluções que permitem navegar em páginas Web, desde os Pocket PCs, à Web TV. Face a estes novos meios de comunicação, torna-se necessário adaptar os conteúdos já existentes na Internet para as plataformas tradicionais para estas novas plataformas. O mesmo acontece relativamente ao Flash, dado já existirem plugins do flash para estas plataformas. Os cuidados a ter não são muitos, passam mais pelo aspecto da página e pelo peso da mesma, ou seja, em vez de se ter uma écran 800x600 ou 1024x768 passa a ter um ecrã 320x400 que é mais alto que largo, isto implica que o design das aplicações seja feito de forma a ser compatível com estes novos meios de comunicação.

Página 102


Outro aspecto a ter em consideração é a questão da largura de banda que é muito inferior em sistemas wirless relativamente aos sistemas de cabo, logo convém não ter páginas muitos pesadas, é um pouco como regressar às origens da Internet em que tudo era mais lento do que actualmente. Alguns exemplos de plataformas:

5- Resumo Cada vez mais a Internet vai-se tornar num mundo novo e é necessário estar atento a todos os novos meios de comunicação, o flash pode dar uma ajuda em só é necessário ter preocupações ao nível do design. 7- Exercício a resolver Propõe-se ao aluno que escreva uma aplicação em flash que permita reconhecer o browser e a versão do plugin instalado, caso não detecte o plugin do flash, deverá abrir automaticamente a página onde o plugin pode ser encontrado.

Página 103


Página 104


AULA XIV – “Fim do curso” 1- Notas Finais No fim do curso cabe ao orientador fazer a avaliação final e atribuir uma nota ao aluno, pode ser sugerido a realização de um exercício final ou não, essa decisão será tomada pela entidade responsável pela viabilização do curso. 2- Disponibilizar em PDF o curso Também deve ser disponibilizado o curso ao aluno para que mais tarde possa recorrer a esse documento de forma a esclarecer alguma duvida pontual que venha a surgir. 3- Entrega de Certificado Deverá ser entregue também um certificado ao aluno, desta vez em mãos, que permita ao aluno, perante o mercado de trabalho, apresentar um documento que confirme os conhecimentos por este adquiridos.

Página 105



4. Conclusão

Página 106


4.1. Breve nota do autor

Depois de um aluno percorrer todas as aulas dadas tal como foram descritas neste relatório, fica apto a desenvolver qualquer tipo de solução em flash, independentemente da dificuldade que possam ter, ficando apenas mais ou menos limitado dependendo das capacidades criativas de cada um. Existem mais alguns pormenores que não foram abordados neste relatório, mas são aspectos tão específicos que considero que devam ser explorados pelos alunos que desejem especializar-se em alguma matéria relativa à Internet, como por exemplo, manipulação de base de dados em ambiente Web, neste caso haveria muito por falar, desde a utilização de bases de dados Mysql a bases de dados SqlServer e Oracle.

Página 107



5. Glossário Página 108


5.1 Conjunto de termos mais usados

FLA Este é o termo utilizado para descrever o

ficheiro que é criado pelo utilizador durante o desenvolvimento de uma aplicação em flash.

Flash Flash é um plug-in e um ambiente de desenvolvimento Web criado pela Macromedia. O ficheiro desenvolvidos em Flash combinam animação, som e interacção tirando vantajem de um formato baseado em desenho vectorial minimizando assim o tamanho dos ficheiros.

Html Hiper Text Markup Language. Formato no qual se programam as páginas Web. É capaz de dar formato a texto, acrescentar vínculos a outras páginas, chamar imagens, sons e outros complementos. Editável com um editor de textos ou software específico.

Jpg arquivo de imagem comprimido, pode ser editado em qualquer editor de imagens.

Plugin Um plug é considerado um “third-party software” que permite ao browser mostrar um determinado conteúdo multimédia.

.SWF ShockWave para Flash, representa o ficheiro final compilado do flash que pode ser visualizado que no browser que no flashplayer.

Action Representa uma instrução de ActionScript exolada.

ActionScript Representa a linguagem de programação usada pelo flash, trata-se de um desdobramento da linguagem já conhecida javascript.

Argumento Iformção passada por parâmetro necessária para que uma determinada acção possa realizar a tarefa que lhe foi destinada.

Behavior Representa um comportamento de algo.

Texto dinâmico Represeenta o texto que pode ser alterado pelo utilizador ou pelo sistema operativo sem ser necessário recompilar a aplicação de flash

Página 109


Evento Representa um qualquer acontecimento

Inteiro Representa um conjunmto de números naturais de 0 a infinito

JavaScript Linguagem baseada em script criada pela Netscape e pela Sun MicroSystem

Sintaxe Estrutura de uma linguagem que também é aplicada à linguagem humana.

.PHP arquivos de páginas Web dinâmicas. É, por sua vez, uma linguagem de programação que permite transladar para a Web conteúdo armazenado em bases de dados.

MYSQL Servidor de base de dados nativo para linux.

.txt arquivo de texto que se abre com qualquer editor de texto.

Página 110



6. Referências Página 111


6.1. Referências mais Relevantes

[1] Macromedia http://www.macromedia.com/ [2] PHP www.php.net

Página 112

e-learning “action script” - dei.isep.ipp.ptpaf/proj/2003/actionscript.pdf · exemplo de...

Documents