CRIANDO SITES EM FLASH

Transcrição

1 UnidadeE Prezado(a) Aluno(a), Nesta unidade iremos trabalhar com arquivos e objetos externos ao Flash utilizando o ActionScript e a Importação. No final iremos criar um Site utilizando a tecnologia Flash. Bons estudos!!! CRIANDO SITES EM FLASH 1. Carregando Arquivos Externos Objeto Loader O objeto Loader é utilizado para carregar arquivos externos como, por exemplo, arquivos jpg e swf. Carregamento de imagens Vamos fazer um simples carregamento de uma imagem. Para carregar imagens utilizamos apenas duas classes, a classe Loader que carrega o arquivo e a classe URLRequest utilizada para informar o caminho do arquivo. Para isso copie uma figura JPG com o nome figura.jpg para uma pasta a sua escolha. Abra um novo documento ActionScript 3.0 no Flash CS5. Pressione a tecla F9 e digite o código abaixo. Salve o arquivo na mesma pasta que você salvou a figura. var figura:loader = new Loader(); var local:urlrequest = new URLRequest(); local.url = figura.jpg ; addchild(figura); figura.load(local); Para testar, pressione as teclas Ctrl + Enter. Você verá no palco a figura que você colocou na pasta. O código local. url define o endereço do arquivo e pode ser absoluto ( ou relativo conforme o exemplo acima. Não esqueça que neste caso o arquivo deverá estar na mesma pasta do arquivo flash. 41

2 Carregamento de textos Para carregar textos no AS 3.0 iremos utilizar apenas a classe URLLoader. Para carregar um arquivo texto você irá precisar um campo de texto. Com a ferramenta texto desenhe um retângulo no palco. Na janela de propriedades dê um nome de instância carrega_txt. Na janela Propriedades você pode escolher uma fonte, alterar a cor e o tamanho do texto, o alinhamento do texto, etc. No exemplo, código para acessar um arquivo texto com um endereço absoluto var fl_textloader:urlloader = new URLLoader(); var fl_texturlrequest:urlrequest = new URLRequest( br/externo.txt ); fl_textloader.addeventlistener(event.complete, fl_completehandler); function fl_completehandler(event:event):void { var textdata:string = new String(fl_TextLoader.data); carrega_txt.text = textdata; } fl_textloader.load(fl_texturlrequest); 42

3 Para acessar um arquivo através de um endereço relativo basta digitar o seu nome. Por exemplo: URLRequest( externo.txt ); O arquivo a ser carregado deverá estar na mesma pasta ou subpasta do arquivo Flash 2. Trabalhando com objetos externos Além de você criar seus próprios objetos, no Flash podemos inserir novos objetos dentro dos filmes. O Flash importa muitos formatos gráficos como, por exemplo: Formatos bitmap (BMP, JPG, GIF) Arquivos de audio (WAV, MP3) Formatos de vídeo (AVI, FLV, MPEG) Importando um bitmap Para importar um bitmap você deve clicar no menu Arquivo e escolher uma forma de importação. Escolha a primeira alternativa (Importar para o palco) e adicione uma imagem ao seu filme. Ao importar para o palco a imagem também será colocada em sua biblioteca. 43

4 Importando som Para inserir um arquivo de som no flash importe-o para a Biblioteca do arquivo atual. Selecione o menu Arquivo, clique em Importar e selecione a opção Importar para a biblioteca. Na caixa de diálogo Importar, escolha o som desejado. Para adicionar o som ao seu filme depois de importá-lo, arraste-o para o quadro onde deverá ser iniciado. Para configurar sua execução clique no quadro onde o som foi inserido e observe as opções nas propriedades. 44

5 Podemos também adicionar um som a um botão. Crie um botão no palco. Dê dois clique neste botão. Isso irá abrir a linha do tempo do botão. Arraste o som que foi importado para o palco. Teste o seu filme. Ao clicar no botão você irá ouvir o som associado. Importando vídeo no Flash CS5 Para utilizar um vídeo no Flash é necessário convertê-lo para o padrão FLV. Utilize o Adobe Media Encoder, instalado com o Flash em seu computador, para fazer a conversão antes de importar para o Flash. Para converter o vídeo clique no botão Adicionar e depois em Iniciar fila para começar a codificação. O arquivo FLV será armazenado na mesma pasta do arquivo de vídeo que foi convertido. Clique no menu Arquivo e na opção Importar e escolha Importar vídeo. Clique no botão Procurar para localizar seu arquivo FLV e depois no botão Avançar. 45

6 Nesta etapa, escolha a capa que determina a aparência e a posição dos controles de reprodução. Clique em avançar e depois em Concluir. 3. Criando um site Vamos colocar em prática alguns conceitos que você aprendeu até aqui criando um pequeno site. 1. Abra um arquivo novo com o nome site.fla. 2. Desenhe três retângulos e os converta em símbolo clip de filme (F8). 3. Utilizando a ferramenta Texto crie um retângulo onde será inserido o texto 46

7 4. Selecione cada um dos retângulos e dê nomes de instância para cada um deles como: bt_texto1, bt_texto2 e bt_texto3. Faça o mesmo com o retângulo do texto, dê o nome de conteudo_txt. 5. Crie três arquivos texto e dê o nome de texto1.txt, texto2.txt e texto3.txt. Coloque algum conteúdo dentro destes arquivos. 6. Pressione a tecla F9 para chamar o painel de Ações e digite o seguinte código: // *** Aparência dos botões *** bt_texto1.buttonmode = bt_texto2.buttonmode = bt_texto3.buttonmode = true // *** classe para URL *** var carrega:urlloader = new URLLoader(); var endereco:urlrequest = new URLRequest(); // *** determina url inicial *** endereco.url = texto1.txt ; // *** carregamento inicial *** carrega.load( endereco ); // *** evento *** carrega.addeventlistener(event.complete, mostratexto); // *** função mostratexto *** function mostratexto(e:event):void { conteudo_txt.text = e.target.data; } 47

8 // *** Eventos de botao *** bt_texto1.addeventlistener(mouseevent.click, carregatexto); bt_texto2.addeventlistener(mouseevent.click, carregatexto); bt_texto3.addeventlistener(mouseevent.click, carregatexto); // *** Cria nova propriedade para os botões *** bt_texto1.clique = texto1.txt ; bt_texto2.clique = texto2.txt ; bt_texto3.clique = texto3.txt ; // *** função carregatexto *** function carregatexto(e:mouseevent):void { endereco.url = e.target.clique; carrega.load( endereco ); } 48

9 ATIVIDADE E Site Caro(a) aluno(a), No último exercício criamos um esboço de um site. Que tal utilizar o modelo para criar um site pessoal? Neste site coloque informações pessoais, seu currículo, algumas fotos (pesquise sobre o componente UILoader) e o que você achar que pode incrementar seu site. Use a criatividade! Bom trabalho! 49