O Stage onde estão os gráficos, videos, botões etc que irão aparecer durante o play back.

Transcrição

1 O que é o Flash? Copyright 2006/2007 Jorge Mota- Multimédia I/ISTEC O flash é uma ferramenta autor, que pode ser usada por designers, editores de conteúdos, engenheiros multimédia e programadores para criar apresentações, aplicações, e outros conteúdos que necessitem de interacção com o utilizador. Um projecto em flash pode conter animações simples, video, apresentações complexas, aplicações e tudo o que possa ser criado entre estes tipos enunciados. De uma forma geral os conteúdos criados com flash são designados aplicações, mesmo que possuam apenas uma animação simples, mas em flash podemos criar aplicações ricas em recursos multimédia como fotografias, som, video e efeitos especiais. Uma grande caracteristica do flash é que criar conteúdos pequenos permitindo que possam ser distribuidos e publicados na Internet. Isto é conseguido porque o flash usa extensivamente gráficos vectoriais. Estes como é sabido requerem muito menos memória que os seus congeres bitmap, já que são representados por formulas/formulações matemáticas, em vez de utilizarem extensos conjuntos de valores para a sua representação. Nas imagens bitmap cada pixel requer individualmente memória para a sua representação. Para construir uma aplicação em flash, criamos gráficos com ferramentas de desenho ou importamos recursos multimédia. Em seguida definimos como queremos e quando queremos que estes elementos criem instanciem/representem os conteudos pretendidos. Quando estamos a criar conteúdos em flash estamos a trabalhar sobre um document File que possui extensão.fla (FLA). Um documento flash tem quatro partes: O Stage onde estão os gráficos, videos, botões etc que irão aparecer durante o play back. A Timeline onde especificamos quando cada elemento aparece. Usamos tambem a Timeline para especificar a ordem dos layers com os gráficos. Nota: os gráficos nos layers por cima aparecem sobrepostos sobre os gráficos dos layers de baixo. A Library que é o painel onde o flash dispõem os elementos que constam do documento em flash. ActionScript código que permite adicionar interactividade aos elementos nos documentos. Por exemplo adicionar código a um botão para mostrar uma nova imagem quando o utilizador faz click no mesmo. Podemos usar o actionscript para adicionar lógica ( inteligência ) aos nossos conteúdos, de forma a terem comportamentos distintos dependendo da acção do utilizador. O Flash inclui duas versões de actionscript apropriadas para cada tipo de Editor/Autor. O Flash inclui muitas caracteristicas que o tornam uma ferramenta de eleição, como por exemplo suporte para componentes drag-and-drop pré-embebidos, behaviors em action script e efeitos especiais que podem ser usados com os recursos multimedia. 1

2 Para publicar um documento flash basta fazer File > Publish. Esta acção criar uma versão compacta do documento com extensão.swf (SWF). Podemos então usar um player flash para ver num brawser ou como aplicação standalone a aplicação. O que podemos fazer com o Flash? Com o enorme reportório de ferramentas disponiveis em Flash, podemos criar muitos tipos de aplicações. Entre estas destacamos: Animações Nesta categoria incluimos banners, cartões de boas vindas, desenhos animados, etc. Muitas outras aplicações incluem este tipo de aplicações. Jogos Muitos jogos são feitos em flash, nestes combinamos a capacidade de animação do flash com algum tipo de lógica (inteligência) em ActionScript. Interfaces Muitos websites (sitios) usam flash nos seus interfaces com o utilizador. Os interfaces incluem navegação simples ou complexa numa ou muitas direcções (barras de navegação local ou global, contextualizada ou não). Áreas de mensagens/noticias Estas áreas estão disponiveis para mostrar informação que varia ao longo do tempo. Uma área dinâmica de mensagens (FMA) num restaurante por exemplo pode mostrar os menus do dia. Veja o tutorial Tutorial: Building Your First Flash Application no site da macromedia. Aplicações Web Internet Estas aplicações incluem um vasto dominio de tipolologias, que usam informação acessivel remotamente para a mostrar de forma rica em termos multimédia dados ou informação. Neste tipo de aplicações podemos incluir calendários, aplicações de cálculo e procura de preços, catalogos on-line, aplicações de e-learning, e outras que permitam visualizar graficamente informação. Para construir uma palicação flash basicamente temos de executar os seguintes passos : 1. Decidir quais as tarefas que a aplicação executa. 2. Criar e importar elementos multimédia, como imagens, video, som, texto, e outros. 3. Fazer o arranjo de elementos no Stage e na Timeline de forma a definir quando e como devem aparecer na aplicação. 4. Aplicar efeitos especiais aos elemntos. 5. Escrever em ActionScript codigo que permita o controlo de fluxo e o comportamento dos elemntos e a forma como estes respondem as interacções do utilizador. 6. Testar a aplicação de forma a determinar se esta a trabalhar conforme planeada senão encontrar e corrigir os respectivos erros. Este ciclo deve ser executado de forma ciclica durante todo o processo de criação. 7. Publicar o FLA como um SWF de forma que possa ser visualizado numa página web ou com um player Flash. Dependendo do projecto e do estilo de trabalho alguns destes passos podem ocorrer noutra ordem. 2

3 Como Criar uma simples aplicação em Flash. Para ilustrar os passos necessários a criação de um documento em flash esta secção explica como fazê-lo na forma de um tutorial. Veja o já referido tutorial em Tutorial: Building Your First Flash Application. O primeiro passo para criar um documento em flash é: A) Criar um documento em flash: 1. Selecionar File > New. 2. Na janela New Document, a opção Flash Document é seleccionada por defeito. prima OK. Na janela de propriedades o botão Size mostra o tamanho actual do documento 550 x 400 pixels. 3. A cor de background esta definida para Branco. Podemos alterar premido o cursor sobre a opção Background a e escolhendo outra. Janela de inspecção de propriedades Desenhar um circulo Após criar um documento estamos prontos para adicionar novos elemntos artisticos e geométricos ao documento. Para Desenhar um circulo no Stage: 1. Selecionar a ferramenta Oval do painel Tools. 3

4 Painel Toolsl 2. Selecionar a Cor com a opção Stroke Color Picker. Selecionar a Cor com Stroke Color Picker 3. Selecionar a cor para o Fill com Color Picker. Assegura que esta contrasta com a cor do Stage. 4

5 4. Desenhar um circulo no Stage usando a ferramenta Oval e Shift-dragging. Premir a tecla Shift para definir o circulo. O circulo desenhado no Stage Criar um simbolo Podemos converter o nosso trabalho num recurso reutilizável, para isso basta convertelo para um simbolo Flash (Flash Symbol). Um simbolo é um recurso que pode ser reutilizado em qualquer parte de um documento flash. Sem necessidade de termos de o definir novamente. Como criar um Simbolo? 1. Escolher a ferramenta Selection no painel Tools. O painel de ferramentas com a opção Selection escolhida 5

6 2. Escolher o círculo no Stage e seleccionar o mesmo. 3. Com o circulo seleccionado, escolher Modify > Convert to Symbol. 4. Na caixa Convert to Symbol, escrever O meu_circulo na caixa Name text box. O comportamento por defeito é Movie Clip. 5. Premir OK. Um rectangulo aparece agora envolvendo o círculo. O recurso está criado e pode ser reutilizado sempre que for necessário no documento. 6. O simbolo aparece no painel Library. Se não estiver visivel o painel Library use Window > Library para o mostrar. Animar um circulo Agora que criamos alguma geometria (artwork) no documento vamos anima-lo. Para criar uma aimação com o circulo: 1. Arrastar (drag) o círculo para a parte esquerda do Stage. O circulo movido para a parte esquerda do Stage 2. Premir na frame 20 da Timeline. 6

7 Selecionar a Frame 20 do Layer 1na Timeline 3. Selecionar Insert > Timeline > Frame. O Flash adiciona frames à Frame 20, que se mantém selecionada Frames inserida na Timeline 4. Com a Frame 20 seleccionada escolher Insert > Timeline > Keyframe. A keyframe é adicionada na Frame 20. Uma keyframe é uma frame em que as propriedades do objecto são explicitamente alteradas. Neste caso a localização do circulo. 7

8 Inserir uma keyframe na Frame Com a Frame 20 seleccionada na Timeline, Arrastar (drag) o circulo para a parte direita do Stage. 6. Seleccionar a Frame 1 do Layer 1 na Timeline. 7. Na área de inspecção de propriedades, seleccionar Motion do menu pop-up Tween. Seleccionar motion tween no inspector de propriedades Uma seta parece na Time line no Layer 1 entre a Frame 1 e a Frame 20. A Timeline com a seta indicando a motion tween Este passo cria uma animação tweened do circulo movendo da esquerda para a direita entreb a frame 1 e Na timeline arrastar a marca de play de um lado para o outro e obeservar a animação. 9. Selecionar File > Save. 10. Escolher o local para guardar no disco e designar o ficheiro PrimeiroExercicio.fla. 11. Selecconar Control > Test Movie para visualizar o ficheiro FLA. 12. Fechar a janela De Test Movie. Publicar o ficheiro Quando terminado um documento Flash, Estamos prontos a publica-lo e visualiza-lo num browser. Quando publicamos um ficheiro FLA este é comprimido em SWF. Este é o formato que colocamos na página web. O comando Publish automáticamente gera o ficheiro HTML com as TAGS correctas para correr o SWF. 8

9 Para publicar um ficheiro FLA: 1. Seleccionar File > Publish Settings. 2. Em Publish Settings escolher o separador Formats e verificar que apenas as opções flash e HTML estão escolhidas. Isto permite que apenas sejam publicadas o ficheiro Flash SWF e o ficheiro HTML. O ficheiro HTML é usado para mostrar o SWF no browser. As opções Flash e HTML no separador Formats 3. Na caixa Publish Settings Seleccionar o separdor HTML e verificar que a enas a opção Flash Only esteja escolhidano Template pop-up menu. Este template cria um ficheiro HTML que contem o SWF e que pode ser visulaizado num janela do Browser. 9

10 Escolher Flash Only do Template menu 4. Premir OK. 5. Seleccionar File > Publish e abrir o browser. 6. Seleccionar File > Open no Browser. 7. Navegar até ao folder onde foi gravado o FLA. O PrimeiroExercicio.fla e o PrimeiroExercicio.Html estão aqui. O Flash cria estes fheiros quando premimos Publish. 8. Seleccionar o ficheiro PrimeiroExercicio.html. 9. Premir Open. Visualizamos agora o documento no Browser. 10