a) Comece um novo arquivo Flash. No Properties Inspector modifique as dimensões do filme para 780 x 100 px.

Transcrição

1 Prática 4 Publicação 1. Objetivos Entender como publicar um filme Flash na web. Desenvolver um banner animado 2. Recursos Necessários Computador com o programa Macromedia Flash MX ou superior. Bloco de notas (Notepad) 3. Conceitos Gerais e Procedimentos 3.1. Atividade 1 - Banners a) Comece um novo arquivo Flash. No Properties Inspector modifique as dimensões do filme para 780 x 100 px. b) Importe uma imagem de fundo para o seu banner. Para isto, vá ao menu File> Import> Import to Stage e escolha dentre fundo1.jpg, fundo2.jpg ou fundo3.jpg que estão no diretório aula04. c) Centralize a figura usando o painel Align. Caso ele não esteja aberto, vá em Window> Align. d) Renomeie a camada existente como Fundo. e) Insira mais duas camadas e nomeie-as como Texto e Retângulo. f) Agora você vai inserir um novo movie clip. Para isso, vá ao menu Insert> New Symbol. Dê o nome de retângulo e escolha a opção Button. 1

2 Ao fazer isso, você será levado à tela de edição do button criado. Nessa tela, há apenas uma camada. g) Selecione a ferramenta Rectangle e desenhe, no primeiro frame da camada, um retângulo que tenha 100px de largura e 30px de altura. Esse retângulo vai servir como fundo para a frase Clique aqui. h) Vamos então escrever a frase. Selecione a ferramenta Texto e digite Clique aqui. Coloque o texto sobre o retângulo. Depois selecione os dois e os rotacione de modo que fiquem na vertical. i) Volte para a primeira cena, Scene 1 (que fica logo acima da listagem de camadas) e selecione a camada Retângulo. Abra a Biblioteca (F11) e arraste o button retângulo para o palco (Stage). Posicione o quadrado na ponta direita da tela com o auxílio do painel Align. j) Insira um keyframe no momento 15 da linha do tempo (Timeline). Neste frame, arraste o quadrado para a extremidade esquerda da tela, segurando a tecla Shift para manter o objeto na mesma linha enquanto arrasta. k) Agora, crie um Motion Tween entre os quadros 1 e 15 da linha do tempo. Insira um keyframe no momento 30 da linha do tempo. Nele, arraste o retângulo para a extremidade direita da tela novamente. Selecione o gráfico retângulo e observe o Properties Inspector. Nela, na caixa de seleção Color, selecione a opção Alpha e escolha 18% para o retângulo. 2

3 l) Agora está na hora de criar o texto do banner. Vá no menu Insert> New Symbol. Dê o nome de texto e escolha a opção Graphic. Clique na ferramenta Text e escreva uma frase como: Aqui tem tudo mais barato! m) Volte para Scene 1 clicando no link Scene 1. Selecione a camada Texto e crie um keyframe no quadro 30 da linha do tempo. Neste keyframe, arraste o graphic texto para o centro do palco. n) Nesta mesma camada, insira um keyframe no quadro 60. Clique em qualquer lugar entre o quadro 30 e 60 com o botão direito do mouse e escolha: Create Motion Tween. Nesse quadro, selecione o texto e aumente seu tamanho até que ele ultrapasse os limites da tela. Com o objeto de texto ainda selecionado, vá à janela Properties e coloque o Alpha em 8%. o) Para terminar, insira um quadro comum no momento 60 da camada Fundo. Agora é só testar seu filme. p) Salve o arquivo como p4_ativ1_seunome.fla Atividade 2 - Publicando na web Antes de publicar seu filme é preciso olhar as características de sua publicação. q) Aproveite o banner que você acabou de fazer para desenvolver esta atividade. Renomeie-o como p4_ativ2_seunome.fla a) Vá em File> Publish Settings. Esta caixa de diálogo tem três painéis. O painel Formats permite que você selecione diferentes formatos que podem ser exportados. Entretanto, formatos como GIF, JPEG e PNG são só imagens estáticas. Formatos como QuickTime Movie e RealPlayer não suportem Flash5 ou MX ActionScript. b) Marque as caixa que indica.swf para gerar o arquivo lido pelo Flash Player e.html para gerar uma página html que será usada com o arquivo.swf. 3

4 c) O painel Flash permite que você controle várias características do arquivo swf. A opção Generate Size Report - investiga o conteúdo do arquivo swf e expõe na janela Output o tamanho dos arquivos dentro do Flash, como sons pesados que podem ser otimizados. Omit Trace Actions permite que você desligue as mensagens enviadas pelo comando trace do ActionScript. De qualquer maneira, estes não são usados nos arquivos.swf mostrados nos browsers. Protect from Import esta opção deve impedir que qualquer um, incluindo você mesmo, de importar o arquivo.swf para o Flash. Debugging Permitted permite que você encontre os erros de seu filme enquanto ele está rodando. O próximo grupo permite que você decida a compressão para imagens e sons. Você ainda pode marcar a opção Override Sound Settings para forçar todos os sons a serem comprimidos. 4

5 A versão no topo da janela serve para salvar os filmes como Flash 1, 2, 3, 4, 5 ou MX. Então, será que você tem um filme com ActionScript avançado e salvar como versão 3, irá funcionar? Não. Se você tem algum ActionScript é melhor salvar como Flash 5 ou MX. Se você usa os novos comando do Flash MX, então MX é sua única opção. No último painel da caixa, você pode determinar como o arquivo html exportado com o.swf será. Se você deseja por os seus filmes na Web, os arquivos.swf devem ser embebidos na página html. Você pode colocá-los na Web como arquivos.swf mas neste caso eles irão ser redimensionados para o tamanho da janela do browser. d) Abra o arquivo.html que foi gerado pelo Flash e veja como o seu filme se comporta numa página html. e) Veja o código gerado. Será que tudo isto é necessário? Entenda o que é necessário e o significa cada item: Para embeber um arquivo.swf à uma página que vai rodar no Internet Explorer é preciso do seguinte código: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" lash.cab#version=7,0,0,0" width="550" height="400"> <param name="movie" value="construcao.swf" /> <param name="play" value="true"/> 5

6 <param name="quality" value="high" /> <param name="devicefont" value="true"/> <param name="bgcolor" value="#333333"/> </object> Onde a longa linha de caracteres que iniciam com classid é a designação para o Flash que o Internet Explorer entende. A parte que começa com codebase diz ao Internet Explorer para ir e buscar o Flash Plugin se o usuário não tiver ainda. Entretanto, se você deixar só com a tag object o Firefox, Netscape, Safari e Ópera não irão entender porque tags object são usadas para designar controles ActiveX. ActiveX é uma tecnologia usada para embeber media no Internet Explorer. Para o Internet Explorer, o Flash é um controle ActiveX. Para os outros browsers, você precisa de uma tag embed: <embed src="construcao.swf" quality="high" play="true" devicefont="true" bgcolor="#333333" width="550" height="400" type="application/x-shockwave-flash" pluginspage=" </embed> Desta maneira, você precisa incluir tanto as tags object quanto embed. Entretanto, para evitar que alguém veja o mesmo arquivo duas vezes é preciso colocar a tag embed dentro da object como a seguir: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" lash.cab#version=7,0,0,0" width="550" height="400"> <param name="movie" value="construcao.swf" /> <param name="play" value="true"/> <param name="quality" value="high" /> <param name="devicefont" value="true"/> <param name="bgcolor" value="#333333"/> <embed src="construcao.swf" quality="high" play="true" devicefont="true" bgcolor="#333333" width="550" height="400" type="application/x-shockwave-flash" pluginspage=" </embed> Atenção! </object> No Internet Explorer, o conteúdo do flash inserido na página da maneira acima terá uma linha ao seu redor e para usar este flash, o usuário terá que clicar 1 vez mais para ativar o flash e outra para usá-lo como desejado. 6

7 Para resolver este problema, é necessário usar um JavaScript, que você encontrará na pasta codigo ao fazer download do arquivo zip para aula. f) Abra o arquivo pagina.html e modifique o nome p4_ativ1_seunome.swf para o nome do seu banner. Salve o arquivo como p4_ativ2_seunome.html Atividade 3 Projeto de animação Agora que você já teve um passo-a-passo para desenvolver um banner, faça uma animação de acordo com o seu gosto. Exigências: O filme tem que ter 1000 x 590 px de dimensões. Deve conter textos animados, gráficos e movie clips. Ao ser publicado em html deve ocupar 100% da tela tanto no Internet Explorer, quanto no Mozila Firefox. O arquivos devem ser nomeados: p4_ativ3_seunome.fla, p4_ativ3_seunome.swf e p4_ativ3_seunome.html. Atenção: Faça uma cópia de todos os arquivos desta aula para no diretório escolhido pelo professor para correção. Boa semana! 7