WORKSHOP: CONFECÇÃO DE OBJETOS DE APRENDIZAGEM INTERATIVOS UTILIZANDO FLASH* Parte 1: Iniciando o Flash www.mecanicavetorial.com Prof. Ricardo R. Fragelli UnB / IESB (fragelli@iesb.br) www.reidaderivada.com 1. INTRODUÇÃO O Macromedia Flash MX é uma ferramenta bastante utilizada para criação de ambientes para Web. Atualmente, também é fortemente aplicada em projetos de educação a distância mediada por computador na construção de objetos de aprendizagem interativos. Com o uso do Action Script, linguagem de script do Flash, é possível desenvolver sistemas que contenham todos os elementos de programação usuais de outras linguagens, tais como variáveis, funções, condicionais, estruturas de repetição, primitivas gráficas, objetos, propriedades e eventos. 2. INICIANDO O FLASH MX CRIANDO ANIMAÇÕES QUADRO A QUADRO Antes de entendermos como funciona a programação dentro do Flash e como utilizá-lo dentro da confecção de objetos de aprendizagem, é necessário abordar seus elementos mais básicos. Para iniciar um projeto faça: arquivo>novo (Ctrl+n). Inicialmente, você terá um palco onde vamos depositar os objetos que farão parte de nossa primeira animação (figura 1). Figura 1 Tela inicial do Flash Utilize os elementos que estão na barra de ferramentas, tais como pincel e retângulo, e faça uma arte semelhante ao mostrado na figura 3. Para modificar as cores dos retângulos, mude as propriedades do pincel na barra de ferramentas propriedades (figura 2). * Workshop apresentado no Congresso Internacional de Qualidade em Educação a Distância CIQEAD, em São Leopoldo/RS em 13 e 14 de novembro de 2007. 1
Figura 2 Barra de propriedades. Figura 3 Sugestão de desenho. Agora, vamos introduzir um quadro-chave baseado no que já desenvolvemos. Na linha de tempo, selecione o quadro de número 15, clique com o botão direito do mouse e escolha inserir quadro-chave (figura 4). Figura 4 Inserir quadro-chave. Será criado um novo quadro igual ao primeiro. Selecione os quadrados internos utilizando a ferramenta seta (figura 5) e modifique as cores dos quadrados pela barra de propriedades. Figura 5 Ferramenta seta. 2
Figura 6 Novo quadro-chave. Vamos então produzir nosso primeiro filme. Vá em controlar>testar filme ou tecle Ctrl+Enter. O filme executará todos os quadros do 1 ao 15 em uma taxa de 12 quadros por segundo. Para voltar à tela de edição, feche a animação ou tecle Ctrl+F4. Se desejar modificar a taxa com que o filme é executado, as dimensões e demais configurações, selecione o fundo e utilize a barra de propriedades. Ao final do filme, você notou que ele sempre volta para o primeiro quadro? Para impedir isto, vamos introduzir um primeiro comando de controle ao filme. Selecione o quadro de número 15 na linha de tempo e abra as ações do quadro. Se a barra de ações não estiver disponível, selecione o quadro e clique com o botão direito, escolha ações (figura 7). Figura 7 Acessando o editor do Action Script. Escolha o modo especialista para que possamos digitar os códigos com mais liberdade (figura 8). Figura 8 Modo especialista. 3
No editor do Action Script, digite o comando: stop(); O Action Script é uma linguagem muito parecida com C e Java e o ponto-e-vírgula é usado para finalizar a linha de comando. Execute novamente o filme fazendo Ctrl+Enter e veja que ele irá parar ao chegar no quadro de número 15. 3. TRABALHANDO COM BOTÔES Seguindo o trabalho já realizado até aqui, vá ao quadro-chave número 15 e adicione o comando stop(); Se executar o filme, o que resultará? Dê Ctrl+Enter e descubra! Vamos adicionar alguns elementos novos ao nosso filme, mas, antes disso, insira uma nova camada ao filme (figura 9) e dê a ela um novo nome (p.ex. Botões). Figura 9 Inserindo uma nova camada. Para garantir que nós não modifiquemos acidentalmente o filme já produzido, vamos proteger a camada do filme clicando no cadeado referente à camada da animação (figura 10). Figura 10 camada da animação protegida. Insira um retângulo e um texto com o escrito iniciar animação ao palco. Coloque-os sobrepostos como se formassem um botão. Após isso, selecione os dois elementos gráficos, clique com o botão direito do mouse e selecione Converter em símbolo (figura 11). Figura 11 Convertendo uma figura em símbolo. Dê um nome ao símbolo que você vai criar e escolha botão (figura 12). 4
Figura 12 Criando um botão. Vamos agora inserir uma ação ao botão criado para que o filme rode quando ele for clicado. Selecione o botão e abra o editor do Action Script (ações do botão). Digite o seguinte código: on(release){ play(); } Existem vários eventos que podem ser usados para o botão. O evento release é o mais comum, contudo, sugiro que teste os demais eventos que são mostrados ao digitar-se on( Note que o botão criado é mostrado em todos os quadros. Para que ele seja mostrado apenas no primeiro quadro, insira um quadro-chave em branco no segundo quadro do filme na camada Botões. Para isso, selecione o segundo quadro, clique com o botão direito e escolha inserir quadro-chave em branco. Para finalizar nosso primeiro filme com manipuladores, vamos inserir um botão de controle no quadro 15. Portanto, vá até ao quadro 15 e insira um outro quadro-chave. Abra a biblioteca de símbolos indo em janela>bilbioteca ou faça F11 (ou Ctrl+L). Note que lá está armazenado o botão que criamos. Selecione e arraste para o palco. Neste momento, a linha de tempo deve estar igual ao da figura 13. Os quadros em branco identificam aqueles que não possuem elementos gráficos. O símbolo α identifica que o quadro possui uma ação associada a ele. Figura 13 Linha de tempo. Selecione o botão do quadro 15. clique com o botão direito e selecione duplicar símbolo. Dê um outro nome ao botão e um novo símbolo será criado. Vamos modificá-lo clicando duas vezes no botão. Mude o texto do novo botão para reiniciar. Clique duas vezes do lado de fora do botão para sair da edição do botão. Selecione novamente o botão, abra o modo de edição do Action Script e digite a seguinte ação: on(release){ gotoandplay(2); } Dê Ctrl+Enter e analise o resultado. O entendimento das ações aplicadas aos botões é essencial para construção de bons objetos de aprendizagem em Flash. 4. INTERPOLAÇÃO DE MOVIMENTO Inicie um novo projeto no Flash (Ctrl+n) e crie um círculo semelhante ao da figura 14. 5
Figura 14 Figura inicial Selecione todo o círculo (borda e preenchimento), clique com o botão direito e selecione converter em símbolo. Dê o nome de bola e escolha a opção Clipe de filme. Agora, abra a janela de alinhamento fazendo janela>alinhar ou digitando Ctrl+k e alinhe o símbolo criado do lado esquerdo da tela. Para isso, você deve selecionar o botão que indica que o alinhamento será feito em relação ao palco como mostrado na figura 15. Figura 15 Alinhamento. Vá até o quadro 30 e insira um quadro-chave. Agora, selecione a bola e faça um novo alinhamento, só que do lado direito. Neste momento, você possui dois quadros-chave. No primeiro, a bola está alinhada do lado esquerdo e, no segundo, a bola está do lado direito do palco. O que vamos fazer é utilizar uma ferramenta do Flash que calcula todas as posições intermediárias entre as duas posições especificadas nos quadros-chave. Para isso, selecione algum quadro que fique entre os dois quadros-chave (p.ex., o quadro 8) através da linha de tempo, clique com o botão direito do mouse e selecione criar interpolação movimento. Se a interpolação for criada com sucesso, aparecerá uma seta entre os quadros-chave. Dê Ctrl+Enter e verifique o resultado. 5. OUTRAS INTERPOLAÇÕES Agora clique duas vezes no clipe bola para que possamos editá-lo. Selecione o preenchimento do círculo e mude de azul para um preenchimento radial (figura 16). Mude também a cor do fundo para preto. Figura 16 Nova bola. Teste o filme e veja como ficou a animação. Dando continuação ao nosso projeto, saia da edição do símbolo bola clicando duas vezes do lado de fora da figura. Depois, vá ao quadro 1, selecione o quadro-chave clicando na linha de tempo, clique com o botão direito e selecione copiar quadro. 6
Vá ao quadro 60, clique com o botão direito na linha de tempo e cole o quadro copiado. Clique com o botão direito em um quadro entre 30 e 60 e crie uma nova interpolação de movimento. Rode o filme criado e analise o resultado. É possível modificar as opções de interação selecionando algum ponto intermediário aos quadros-chave e abrindo a janela de propriedades (figura 17). É possível ter um controle de aceleração (atenuação) e adicionar rotação durante o movimento (teste os controles). Figura 17 Propriedades da interpolação. Vá ao quadro 1 e alinhe o símbolo bola com o centro da tela. Faça o mesmo com a bola do quadro 60. Vá até o quadro 30, selecione o símbolo bola e abra a janela de transformação fazendo janela>transformar ou Ctrl+t. Escolha 20%. Mude a atenuação da primeira interpolação para 100 e da segunda para -100. Rode o filme e analise o resultado. 6. MELHORANDO O FILME Abra a edição do símbolo bola e faça uma linha que atravesse o círculo (figura 18). Figura 18 Edição da bola. 19). Clique no meio da linha e arraste. Deste modo, você estará provocando uma curvatura na linha (figura Figura 19 Edição da linha. Selecione a parte superior da bola, mude para outro preenchimento radial e apague a linha que você desenhou anteriormente e que funcionou como guia para sua arte final (figura 20). 7
Figura 20 Bola modificada. Nas propriedades da primeira interpolação, escolha rotação sentido anti-horário (1 vez). Faça o mesmo para a segunda interpolação. Rode o filme. Selecione a bola do quadro 30 e abra as propriedades. Escolha alpha igual a 20%. Rode o filme. Para finalizar, mude a atenuação da primeira interpolação para 100 e da segunda para -100. Teste o filme. Mude o tamanho das bolas dos quadros 1 e 60 para 300%, aproxime um pouco a bola do quadro 30 para o centro e rode o filme. Teste outras possibilidades e adicione alguns botões para controlar o filme. Figura 21 Outra bola modificada. Existem outras interpolações que são possíveis de serem realizadas no Flash, contudo, devido ao pouco tempo, não serão abordadas nesta singela apresentação. Entretanto, aconselhamos fortemente que estude sobre a interpolação de forma e a interpolação com uso da guia de movimento. Um forte abraço e até o próximo encontro! 8