11 ANO PROFISSIONAL TCNICO DE MULTIMDIA

2012-2013

Tcnicas de Multimdia
Animao 2D Avanada Class e ActionScript

Ficha de Trabalho n 7

1. Cria no ambiente de trabalho do teu computador uma pasta designada Atividade N7_Nome_N. Dentro desta
deves guardar cada um dos exerccios que se seguem.

2. Copia a pasta de apoio para a tua pasta. Visualiza o documento Atividade N7.swf.
Este projeto desenvolvido recorrendo a objetos shape, movieclips e botes. Os documentos Main.as e PNGEncoder.as so ficheiros de cdigo que permitem ao utilizador criar formas, escrever e gravar os seus trabalhos. Cada fase deve ser respeitada, tendo em ateno dimenses, sensibilizao do objeto, cores, nomes de instncias e localizao dos ficheiros. L cada passo com ateno!

3. Abre o programa CorelDraw X3. Cria os seguintes cones com duas verses (do mesmo tamanho) a cores e em
tons de cinzento: Lpis, Borracha, Ficheiro para Download e Limpar Cada um deve ser realizado num ficheiro individual e gravado com o nome do objeto. No final de estarem todos criados, e com verso Cores e Cinza, deves reabri-los, selecionar o objeto e export-los no formato ai (Adobe Illustrator) - o ficheiro ser posteriormente importado como shape para o Flash.

4. Abre o programa Flash Professional CS5. Cria um novo documento ActionScrip 3.0. 5. Ativa as Rguas. 6. Cria o stage com as seguintes caractersticas: 25 FPS; 600px x 350px; cor Branca. 7. Cada objeto ser desenhado e convertido em smbolo posteriormente, para isso deves ter em ateno os objetos que j se encontram no stage. Podes bloque-los medida que os vais criando, evitando que sejam includos noutro objeto. 8. Desenha um retngulo branco 600px x290px, sem contorno e converte-o em MovieClip (sensibilizandoo no canto superior esquerdo) designa-o Board. Define o nome da instncia board e alinha-a ao canto superior esquerdo do stage.

AGRUPAMENTO DE ESCOLAS DE PORTO DE MS 1

9. Desenha um retngulo com 600px x 60px, cor #DFDFDF, alinha-o ao fundo e ao centro do stage. Converte-o num Movieclip, designa-o de ToolsPanel e nas Propriedades da Instncia atribui-lhe o nome toolsPanel. 10. A faixa feita anteriormente ser utilizada para colocar todas as ferramentas que o utilizador pode selecionar para desenhar, escrever, apagar ou gravar. 11. Agora vais importar os objetos desenhados no Corel e convertidos em ficheiros do Illustrator. No menu File -> Import -> To Stage - localiza o ficheiro e seleciona-o. Surge um painel semelhante imagem seguinte (pode mudar tendo em conta as diferentes verses):

Verifica se todos os objetos esto selecionados. Os restantes elementos devero estar definidos por defeito.

12. Importa-os individualmente. Verifica se ficam localizados na Biblioteca (Library) e apaga-os do stage. Cria um Movieclip para cada um dos seguintes objetos: Lpis a cores- designa-o de PencilCursor; Borracha a cores - designa-o de EraserCursor; Ficheiro para Download a cores - designa-o de SavedIcon. Cria um Movieclip designado de Text com letras abc, com uma fonte de letra comum maioria dos computadores ou quebrando-a at se tornar num vetor. Cria um Movieclip designado de CloseButton utilizando uma circunferncia e um x com as cores tua escolha.

11 ANO PROFISSIONAL TCNICO DE MULTIMDIA

2012-2013

13. Cria botes utilizando os Movieclips e Objetos para cada um: Observa a figura para

compreenderes os objetos em cada estgio do Boto.

Devem estar alinhados ao centro. Deves criar os seguintes botes - ClearIcon (com os objetos Limpar); EraserIcon (com o Movieclip e objeto da Borracha); PencilIcon (com o Movieclip e Objeto do Lpis); SaveIcon (com o Movieclip e objeto Ficheiro para Download); TextIcon (com o Movieclip Text) 14. Cria no Stage, alinhando do lado esquerdo do Movieclip ToolsPanel, como mostra a imagem:

Designa as instncias (do stage), respetivamente, como: saveTool - eraserTool - textTool - saveButton - clearTool 15. Posiciona sobre os trs primeiros botes as instncias dos Movieclips PencilCursor, EraserCursor e Text designa-as como: pencil, eraser e txt - sobrepondo-as como mostra a imagem.

16. Nesta fase vais desenhar a caixa de dilogo que informa que o ficheiro foi guardado. Cria um Movieclip como mostra a imagem, tem ateno aos passos necessrios:

AGRUPAMENTO DE ESCOLAS DE PORTO DE MS 3

Realiza gravaes peridicas. Cada passo deve ser respeitado cuidadosamente assim como os nomes dos diferentes objetos criados e as instncias colocadas no stage. A aplicao poder no funcionar! 17. Desenha um retngulo com 600px x 350px, preto com 50% alpha para servir de fundo. 18. Desenha um retngulo com os cantos arredondados, preto, com a dimenso tua escolha, para que todos os elementos estejam devidamente acondicionados. Posiciona-o no centro do retngulo anterior. Coloca uma instncia do movieclip SavedIcon e o texto O ficheiro est salvo! a branco. Coloca uma instncia do Movieclip CloseButton, designa-a de closeBtn, dimensiona-a e posiciona-a no canto superior esquerdo do retngulo preto. Observa uma imagem do que se pretende: 19. O prximo passo ser criar o Size Panel, corresponde rea onde se pode alterar o tamanho da

ferramenta borracha, lpis e texto, clicando na rea do painel ou no crculo dentro deste. Seleciona a ferramenta Rectangle Primitive Tool, define os cantos a 4, cor #EFEFEF e cria um retngulo com 80px x 50px. Converte-o num MovieClip com o nome InfoPanel. Designa a instncia de sizePanel. Agora com a ferramenta Oval cria um crculo preto 5px x 5px e centra-o no sizePanel, converte-o num MovieClip ShapeSize e designa a instncia de shapeSize. 20. Aplica efeito de Dropshadow nos diferentes Movieclips e objetos de forma a suavizar o aspeto. 21. Nesta fase vais criar a paleta de cores. Cria um crculo 22px x 22px usando a ferramenta Oval, cor #eeeeee e converte em MovieClip, designa-o de ColorShadow. Adiciona o efeito de Dropshadow. 22. Desenha um segundo crculo de 16px x 16px de cor preto. Centra os crculos. Copia ambos e repita este processo mudando a cor do crculo interior de acordo com a seguinte paleta: 23. Organiza a paleta como na figura. Seleciona e converte num Movieclip Colors e designa a instncia de colors.

11 ANO PROFISSIONAL TCNICO DE MULTIMDIA

2012-2013

24. O aspeto final da aplicao deve ser semelhante imagem:

25. Toda a parte de criao est concluda, falta criar o cdigo para o cursor reconhecer as funes de cada boto e o cdigo de cores. Esta fase seguinte deve desenvolver-se da seguinte forma: No painel de propriedades do documento aplica a classe Main (o ficheiro Main.as est na pasta de documentos copiado inicialmente). 26. Para que seja possvel alterar a cor do trao bem como salvar o documento temos de utilizar o cdigo da Adobe PNG Encoder (PNGEncoder.as). 27. Guarda e testa o trabalho final. Verifica o cdigo no documento Main.as se os nomes das instncias correspondem s do documento.

Verifica o resultado e guarda o trabalho. Copia a pasta final para o servidor

Bom Trabalho! As Formadoras, Aline Mendes e Dina Duarte

AGRUPAMENTO DE ESCOLAS DE PORTO DE MS 5