Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Transcrição

1 Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Apresentar a aplicabilidade do Flash e do Dreamweaver em websites. Tópicos 1. I ntrodução : um filme flash na página 2. Alterando um filme flash diretamente do Dreamw eaver 3. Utilizando o M odo W indow 4. Entendendo a TAG <OBJECT> 5. Objetos Flash predefinidos 1. Introdução: um filme flash na página O Flash e o Dreamweaver podem trabalhar juntos para a produção de um site dinâmico e prático. O Dreamweaver gera todos os códigos HTML necessários para publicar os filmes Flash na Web. Embora o Flash possa gerar páginas HTML básicas e suficientes para a sua publicação, o Dreamweaver possibilita um maior controle sobre o posicionamento visual do filme (SWF) e gerencia melhor o uso do plug in, trás também alguns elementos FLASH préformatados como botões e caixa de texto. Primeiro crie uma animação ou interface no Flash e exporte o arquivo no formato SWF. Abra um novo arquivo no Dreamweaver. Para inserir o swf pelo menu: I nsert > M edia > Flash ou Ctrl + A lt + f

2 A caixa de diálogo SELECT FI LE permite pesquisar as pastas e encontrar o filme flash. Se o arquivo escolhido não estiver localizado na mesma pasta do HTML, você receberá a opção de salvar uma cópia no diretório. Isto melhora a organização do trabalho. O inspetor de propriedades exibe as informações comuns e permite alterar alguns parâmetros do filme Flash.

3 Name Identifica o filme para facilitar sua manipulação por script. W e H Tamanho do SWF em pixels. File O caminho/localização do arquivo. Clique na pasta do lado direito da guia se quiser mudar o arquivo. Src Armazena o arquivo original do Flash (FLA), permitindo a edição a partir do DW. A lign Determina o alinhamento do filme na página. Bg Especifica uma cor de fundo para a área do filme. Essa cor aparece também enquanto o filme é carregado. V Space e H Space Determina um espaço em branco em torno do filme (vertical e horizontal). Quality Configura o parâmetro de qualidade para o filme flash Low, Auto Low, Auto High e High. Scale Configura o parâmetro de escala para as tags OBJECT e EMDED. Define como o filme é colocado dentro da janela do navegador quando os valores de largura e altura são porcentagem. Default ( Show A ll) : Torna o filme inteiro visível na área especificada. No Border: Faz com que o filme seja dimensionado para se ajustar a janela do navegador. Não ocorre distorção, parte do filme pode ser cortada. Exact Fit: Distorce o filme para preencher toda a área visível da janela do navegador. Loop Força um loop automático se não encontrar STOP na timeline do filme. A utoplay

4 Reproduz o filme automaticamente quando a página carrega.autoplay: Reproduz o filme automaticamente quando a página carrega. P arameters Inserir parâmetros adicionais para o filme. Reset Size Redefine o tamanho original do filme, como criado no Flash. 2. Alterando um filme Flash diretamente do Dreamw eaver Selecione o swf que deseja alterar e clique no botão EDIT no inspetor de propriedades: Se o Dreamweaver não souber o endereço do FLA ele solicitará e abrirá o FLASH para que a alteração seja executada. A indicação que você está trabalhando em um arquivo vinculado são os ícones na parte superior esquerda embaixo do nome do arquivo. A melhor forma de centralizar um filme flash dentro da página é usar a tag <center> antes da tag <EM BED> e/ou <OBJECT>. Podemos também usar as possibilidades de alterar as dimensões do filme (100%) na janela de propriedades do Dreamweaver e respeitando as opções de escala: Default, No Border ou Exact Fit. 3. Utilizando o Modo W indow O parâmetro do modo WINDOW, WMODE, ativa o fundo de um filme FLASH, podendo, por exemplo, torná lo transparente e mostrar o conteúdo da página por trás dele. As três opções do modo Window são:

5 W indow : padrão do player, o filme é reproduzido normalmente. Opaque: Para forçar um fundo opaco que esconde a página atrás do filme. Transparent: Torna o fundo do filme transparente. Dependendo da capacidade da máquina este modo pode provocar uma maior lentidão na execução do filme. Observação: Para possibilitar a sobreposição em uma página DHTML precisamos usar o recurso de CAMADAS ou LAYERS. Para tornar o fundo de um filme transparente: No Dreamweaver, selecione o filme flash. Clique no botão P A RAMETERS no inspetor de propriedades Na caixa de diálogo insira W M ODE para o parâmetro e TRANSP A RENT, OP A QUE ou W I NDOW para o valor. 4. Entendendo a TAG <OBJECT> Quando inserimos um filme flash em uma HTML ele fica embutido na tag object como no exemplo abaixo: <object classid="clsid:d27cdb6e AE6D 11cf 96B " codebase=" download.macromedia.com/pub/shockwave /cabs/flash/swflash.cab#version=6,0,29,0" width="330" height="250" id= animacaocontrolada2 > <param name="movie" value="animacaocontrolada2.swf"> <param name="quality" value="high"> <param name="loop" value="false"> <param name="scale" value="noborder"> <param name="wmode" value="transparent"> </object> Object: tag de abertura contendo o código I D e localização do controle ActiveX para o Flash player. Classid : É o código de identificação de ActiveX. Codebase: Especifica a localização do instalador de controle Active X como um URL. #version =6,0,29,0 mostra eu a versão 6 do player deve ser utilizada. W idth e

6 height controlam a largura e a altura real do filme, como ele aparece na página pode ser usada em pixel ou porcentagem. id: Atribui um identificador de JavaScript VBScript para o filme, de modo que possa ser controlado por funções DHTML. Por padrão este nome é igual ao nome do arquivo sem a extensão swf. param name=" movie" : Determina qual filme Flash é carregado no documento. param name=" quality" : Controla a qualidade da renderização do filme, pode ser: low, autolow, autohigh, high ou best. param name=" loop" : Controla a repetição da reprodução do filme quando este chega ao final da timeline principal. Valor = TRUE ou FA LSE. param name=" scale" : Controla como o filme é redimensionado. (veja exercício anterior) param name=" w mode" : Controla a aparência do fundo do filme Flash. < / object>: Tag de fechamento para a tag <object> Mais alguns parâmetros: < param name= salign value=... Controla o alinhamento do filme dentro do espaço reservado na área e visualização. Os valores aceitos são: o L : Borda esquerda, centralizado verticalmente o R : Borda direita, centralizado verticalmente. o t : Borda superior, centralizado horizontalmente. o b : Borda inferior, centralizado horizontalmente. o lt: Borda esquerda superior. o rt: borda direita e superior. o lb : borda esquerda e inferior. o Rb: borda direita e inferior. < param name= bgcolor value= #FFFFFF Controla a cor de fundo do filme flash, neste exemplo, para a cor branca. Usar código hexadecimal. < param name= menu value=... true / false Controla a exibição do menu contextual do Flash player que pode ser chamado com o botão direito do mouse. < param name= play value=... true / false Inicia a reprodução do filme enquanto a página é carregada (true) ou aguarda todo o carregamento antes de continuar (false). 5. Objetos Flash predefinidos O Dreamweaver inclui algumas opções simples para adicionar conteúdo em FLASH predefinido. Flash Button A partir de uma biblioteca de botões podemos escolher um estilo, editar os rótulos e links. É preciso salvar a página antes de inserir os botões porque o Dreamweaver precisa saber onde salvar os novos objetos.

7 Para inserir um botão flash: I nsert > M edia > Flash Button no menu de aplicação. Teremos a janela: I nsert Flash Button I nsert Flash Button

8 Style Selecione o botão na lista fornecida. Visualize na janela sample. Button text Digite o texto que será inserido no botão. O limite de texto é o tamanho do botão. Font Selecione uma fonte para o texto. No campo size mude o tamanho da fonte. Link Digite um nome de arquivo ou URL ou clique no botão browse para localizar. Target Escolha um quadro ou janela alvo onde será Berto o novo arquivo. Bg color Permite escolher uma cor de preenchimento para o espaço retangular ocupado pelo botão (espaço em volta). Use o formato hexadecimal. Save as Insira um novo nome para o filme ou use o sugerido. Pode se também escolher um local para que este filme seja salvo browse. I nspetor de propriedades

9 Para alterar o botão encontramos algumas opções diretamente no painel de propriedades ou podemos escolher a opção edit no painel. Flash Text O objeto FLASH TEXT permite incluir um corpo de texto com um efeito simples de rollover. O texto é renderizado corretamente no navegador mesmo que a fonte que você especificar não existir na máquina do usuário. Para inserir um FLASH TEXT: I nsert > M edia > Flash Text no menu de aplicação. I nsert Flash Text

10 Font Selecione uma fonte do menu drop down. As informações sobre a fonte serão incorporadas ao SWF, assim o texto sempre aparecerá como projetado. Size Digite o tamanho da fonte. Selecione atributos de estilo nos botões localizados logo abaixo do menu de fontes: bolde, italic e alinhamento. Color Escolha uma cor para o texto. Rollover color Escolha uma cor para o rollover do texto. Text Digite o texto desejado. Insira manualmente a quebra de linha. Link Digite um nome de arquivo ou URL ou clique no botão browse para localizar. Target Escolha um quadro ou janela alvo onde será Berto o novo arquivo. Bg color

11 Permite escolher uma cor de preenchimento para o espaço retangular ocupado pelo texto. Use o formato hexadecimal. Save as Insira um novo nome para o filme ou use o sugerido. Pode se também escolher um local para que este filme seja salvo brow se. P icture View er Flash Aqui vamos inserir um elemento FLASH que vai interagir com arquivos JPG, por isso temos que ter cuidado na organização dos dados. Abra uma pasta para organizar o seu arquivo DHTML e dentro desta pasta abra uma outra com o nome de imagens onde teremos algumas imagens no formato JPG. Carrege o elemento FLASH: I nsert > M edia > I mage View er Teremos a caixa de diálogo: Save Flash Element que permite especificar um local para salvar o arquivo SWF.

12 Uma caixa cinza com o ícone do FLASH no centro será inserida na página. Podemos utilizar o inspetor Tag para modificar os parâmetros do elemento Flash.

13 As configurações permitem criar uma apresentação de slides interativa a partir de uma série de imagens e escolher opções para controlar a reprodução inclusive com o uso de transições animadas. Para escolher as imagens que serão exibidas na sua apresentação, clique uma vez na área de texto á direita da listagem do parâmetro imageurls. Você pode editar manualmente os endereços ou clicar no pequeno ícone que surge a direita do texto para abrir a janela de edição.

14 6. Bibliografia DAMASCENO, Anielle; Flash M X 2004; Visual Books; SP;2004. REINHARDT, Robert; DOWD, Snow; M acromedia Flash M X 2004 A Biblia; Elsevier; SP; STALLONS, Jeanette; M acromedia Flash M X professional 2004 ; Macromedia; California; 2004.