Tcnico em Informtica Multimdia

Tcnico em Informtica
Multimdia

Tcnico em Informtica Multimdia

Governador: Eduardo Henrique Accioly Campos Vice-Governador: Joo Soares Lyra Neto Secretrio de Educao: Anderson Stevens Lenidas Gomes Secretrio Executivo de Educao Profissional: Paulo Dutra Gerente Geral da Educao Profissional: Luciane Pula Gestor de Educao a Distncia: George Bento Catunda Coordenador do Curso: Joo Ferreira da Silva Jnior Professor Pesquisador: Dino Lincoln Figueira Santos Equipe Central de Educao a Distncia: Andria Guerra | Carlos Cunha | ber Gomes | Gustavo Tavares | Maria de Lourdes Cordeiro Marques | Marcos Clemente | Morgana Leo| Mauro de Pinho Vieira| Reginaldo Filho.

Tcnico em Informtica Multimdia

INDICAO DE CONES

Ateno: indica pontos de maior relevncia no texto. Saiba mais: oferece novas informaes que enriquecem o assunto ou curiosidades e notcias recentes relacionadas ao tema estudado. Glossrio: indica a definio de um termo, palavra ou expresso utilizada no texto. Mdias Integradas: sempre que se desejar que os estudantes desenvolvam atividades empregando diferentes mdias: vdeos, filmes, jornais, ambiente AVA e outras. Atividades de aprendizagem: apresenta atividades em diferentes nveis de aprendizagem para que o estudante possa realiz-las e conferir o seu domnio do tema estudado.

Tcnico em Informtica Multimdia

COMPETNCIAS

Conhecer os princpios de multimdia para web Desenvolver animaes para uso em interfaces Desenvolver elementos de multimdia para interfaces Conhecer tcnicas de edio e compresso de mdia para web Conhecer tcnicas de edio e montagem de vdeo para web

Tcnico em Informtica Multimdia

CONTEXTUALIZAO

DAS

COMPETNCIAS

DA

DISCIPLINA NO CURSO DE INFORMTICA

Ol, estudante! Como vai?

Nesta disciplina voc aprender como desenvolver interfaces multimdias arrebatadoras para web. Sabemos que num futuro muito prximo a maioria dos aplicativos e programas que rodam nos computadores pessoais estaro online. O futuro das interfaces digitais, que estaro em substancial fatia na web, so aplicativos multimdia convidativos e confortveis ao nosso sistema sensorial.

possvel ampliar a interao entre homem e mquina atravs de interfaces multimdia, pois utilizam mltiplos canais para efetivar esta comunicao. No s atravs de texto, mas de imagens, sons e vdeos, ns podemos explorar o mximo da interface em se adequar s necessidades do usurio. Com isso, possvel desenvolver aplicativos para internet mais confortveis de usar e mais fceis de interagir.

Assim, esta disciplina prope desenvolver competncias que permitam entender o que multimdia e como aplic-la na internet. Bem como ensinar o uso da tecnologia Flash no desenvolvimento de interfaces que possam interagir com o usurio atravs de animaes e vdeos. Por fim, competncias referentes aos diferentes formatos de compactao e tcnicas para edies de vdeo sero praticadas, visando consolidar o aprendizado.

Estaremos ao longo da disciplina revelando os segredos tecnolgicos dos grandes websites em multimdia. Vale a pena se dedicar.

Bons estudos!

Prof. Dino Lincoln

5

Tcnico em Informtica Multimdia

SUMRIO
1 INTRODUO..................................................................................................................7 2 CONHECER OS PRINCPIOS DE MULTIMDIA PARA WEB ...................................................9 2.1 CONCEITUANDO A MULTIMDIA PARA WEB .................................................................... 9 2.2 HISTRIA DO FLASH ....................................................................................................... 11 2.3 FUNCIONAMENTO DO FLASH......................................................................................... 12 2.4 INTRODUO AOS PAINIS DO FLASH ........................................................................... 15 3 DESENVOLVER ANIMAES PARA USO EM INTERFACES ................................................ 19 3.1 ANIMAO QUADRO-A-QUADRO .................................................................................. 19 3.2 ANIMAO SEMI-AUTOMTICA .................................................................................... 20 3.3 ANIMAES EM CAMADAS ............................................................................................ 20 3.4 MANIPULANDO A TIMELINE COM ACTIOSCRIPT ........................................................... 21 3.5 MOVIE CLIPS ................................................................................................................... 22 3.6 INTEFACES COM BOTES ............................................................................................... 23 4 DESENVOLVER ELEMENTOS MULTIMDIA PARA INTERFACES ......................................... 24 4.1 INSERINDO SONS NO FLASH........................................................................................... 24 4.2 MANIPULANDO A TIMELINE COM LABELS (MARCADORES) .......................................... 25 5 CONHECER TCNICAS DE EDIO E COMPRESSO DE MDIA PARA WEB ........................ 27 5.1 IMPORTANDO VDEO NO FLASH .................................................................................... 28 5.2 EFEITO DE MSCARA ...................................................................................................... 29 6 CONHECER TCNICAS DE EDIO E MONTAGEM DE VDEO PARA WEB .......................... 31 6.1 TCNICAS DE EDIO DE VIDEO ..................................................................................... 32 6.2 MODIFICANDO PROPRIEDADES DOS SMBOLOS ........................................................... 33 6.3 UTILIZANDO TCNICAS DE EDIO NO FLASH ............................................................... 34 REFERNCIAS ................................................................................................................... 36 CURRCULO DO PROFESSOR-PESQUISADOR ..................................................................... 37

Tcnico em Informtica Multimdia

1 INTRODUO Ol! Tudo bem?

Antes de iniciarmos a transferir os conhecimentos sobre as competncias apresentadas, importante que voc observe algumas recomendaes para o melhor aproveitamento desta disciplina. Ou seja, conseguir aprender mais e melhor em menos tempo.

Reserve um perodo de tempo especialmente para o estudo da disciplina de Multimdia e no faa outras tarefas em paralelo enquanto estuda este caderno e faz seus exerccios. Como estaremos lidando com bastante contedo de hipertexto, as vezes voc estar lendo o caderno, noutros momentos navegando em algum site multimdia apresentado pelo caderno ou ainda assistindo os vdeos indicados. Estas mltiplas atividades iro otimizar seu aprendizado mas tambm demandaro muito sua ateno. Conversar em chats online, ou assistir TV enquanto estuda, far voc perder detalhes importantes das aulas que podem lev-lo a no entender o contedo e ter que repetir a aula buscando o ponto que perdeu.

Essencialmente, estaremos aprendendo a trabalhar com a mais poderosa ferramenta para desenvolvimento de contedo multimdia para internet: o Flash. Um programa to verstil que voc poder us-lo tambm para desenvolvimento de apresentaes, websites, hotsites ou mesmo CDROMs interativos.
7

Tcnico em Informtica Multimdia

Hotsites so pequenos websites, geralmente abertos numa janela a parte (pop-up) que apresentam um pequeno contedo especfico e temporrio: promoes de uma loja, resultados de jogos ou de eleies, por exemplo.

Por fim, gostaria de parabeniz-lo por estar se esforando e dedicando seu tempo para aprender e crescer profissionalmente. Vale a pena e voc colher os frutos desta dedicao. Vamos comear!

Tcnico em Informtica Multimdia

2 CONHECER OS PRINCPIOS DE MULTIMDIA PARA WEB

Ol! Nesta competncia voc conhecer as razes da multimdia para web, bem como ser apresentado aos mais poderosos recursos de desenvolvimento de aplicativos para internet.

Estes conhecimentos so essenciais para qualquer profissional de informtica. Haja vista a popularizao da multimdia e da prpria web nos dias atuais, alm da perspectiva futura de crescimento da presena das interfaces ricas em recursos multimdia espalhando-se por todos os aparelhos eletrnicos que interagem com pessoas.

Ao desenvolver esta competncia, voc nunca mais ver a internet com os mesmos olhos. Bons estudos! 2.1 CONCEITUANDO A MULTIMDIA PARA WEB

O conceito de multimdia consiste na apresentao de mltiplas mdias numa mesma interface digital, simultaneamente. Estas mdias (meios de transmisso de informao) podem ser: Estticas: texto, foto, ilustrao; Dinmicas: filme, som, animao.

Particularmente na internet, websites multimdia comearam a se desenvolver em javascript (para efeitos visuais) em meados dos anos 1990. Tambm se utilizava um formato de udio *.mid, de qualidade bastante reduzida e monofnico. Todavia, para

Tcnico em Informtica Multimdia

conexes discadas e relativamente lentas, mesmo estas aplicaes simples eram pesadas e demoravam a carregar. Javascript uma linguagem de script que se parece em alguns pontos com a linguagem de programao JAVA e atravs da qual possvel construir programas com efeitos visuais que rodam em pgina da web.

Foi ento que apareceu uma nova tecnologia, baseada em animao vetorial, leve, rpida e que ganhou espao como nenhuma outra. Ainda hoje o mais poderoso recurso para desenvolvimento de aplicaes multimdia para web. Estamos falando da tecnologia Flash.

Atravs desta tecnologia possvel construir websites multimdia poderosos. Ou seja, com interfaces que utilizam todos os recursos multimdia disponveis. Por exemplo, o site We Choose The Moon (www.wechoosethemoon.org) (Figura 1). Nesta

interface, apresentam-se os estgios de lanamento da Apolo 11 at seu pouso na lua, interagindo com o usurio via texto, vdeo, udio e fotos.

Figura 1 - Website Multimdia

Fonte: We Choose The Moon (2012)

10

Tcnico em Informtica Multimdia

Do mesmo modo, podemos exemplificar com o website do filme Iron Man 2 (http://ironmanmovie.marvel.com/) rico em recursos multimdia (Figura 2).

Figura 2 - Website Multimdia

Fonte: Iron Man 2 (2012)

No subcaptulo a seguir, voc entender melhor como surgiu esta tecnologia de desenvolvimento de aplicativos multimdia que mudou os rumos da web.

2.2 HISTRIA DO FLASH

Flash uma tecnologia que utiliza linguagem action script e modernos compiladores de grficos vetoriais, mas mais conhecido como plataforma ou programa. O programa Flash um software editor no qual o designer constri seus websites e demais aplicativos multimdia, baseados na supracitada tecnologia.

Seu desenvolvimento iniciou em 1995 pela empresa Futurewave, tinha o nome de Cellanimator e desde o princpio era um software para desenvolvimento de
11

Tcnico em Informtica Multimdia

animaes vetoriais para web. Em 1996, esta empresa foi comprada pela Macromedia e o software foi renomeado para Flash 1.0 (Ficou bem mais bonito, por sinal, no?). A Macromedia e o Flash cresceram a passos largos na internet, que carecia de uma tecnologia para desenvolvimento de interfaces multimdia naquela poca. Em 9 anos atingiram um nvel de popularizao tal, que pelo menos 90% dos sites da internet tinham algum recurso em multimdia desenvolvido em Flash ou, em alguns casos, eram websites 100% feitos em Flash.

Este sucesso atraiu a ateno das grandes corporaes e em 2005 a gigantesca Adobe comprou a Macromedia, lanando o Adobe Flash CS3. Incorporando o software ao grupo CS3 (Creative Suite 3) de aplicativos, como Adobe Photoshop CS3, Adobe Premiere CS3, e etc.

No subcaptulo abaixo, voc entender como funciona, por dentro, esta tecnologia que ser bastante trabalhada ao longo do nosso curso.

2.3 FUNCIONAMENTO DO FLASH

Como todo programa de computador, esta plataforma de desenvolvimento de programas multimdia tem um funcionamento em duas formas: arquivo-fonte

(ou

cdigo-fonte):

extenso

*.fla,

editado

pelo

desenvolvedor/designer; arquivo-executvel (ou cdigo-executvel): extenso *.swf, visualizado pelo usurio final. Na engenharia de software, entende-se por plataforma programas de computador usados como base para desenvolvimento de outros programas.
12

Tcnico em Informtica Multimdia

O arquivo-fonte sempre ser de extenso *.fla e o arquivo-executvel tem como principal extenso *.swf, mas pode ser *.exe, *.mov, *.avi, dentre outros, conforme desejo do desenvolvedor. Sempre o arquivo-executvel gerado com base no arquivo-fonte, sendo este a sua verso final para interao com o usurio.

Entenda um pouco melhor como se desenvolve aplicativos multimdia em Flash. Primeiro ns construmos este aplicativo, website, ou qualquer coisa que seja em Flash usando o software editor, por exemplo Adobe Flash CS3 Professional, trabalhando num arquivo-fonte. Depois de finalizado o projeto, com base neste arquivo-fonte, gera-se o arquivo-executvel. Este ltimo o que pode ser acessado pelo usurio para visualizao e interao com a verso final do programa. Ele no editvel e, portanto, seguro contra roubo ou danificao de projetos por parte de hackers, ou outros mal intencionados.

Ou seja, o designer desenvolve todo o seu aplicativo multimdia no programa editor e salva o projeto como, pro exemplo, website1.fla. Esse arquivo s pode ser aberto por um programa editor, como o Adobe Flash CS3 Professional. O usurio, que vai acessar este website, no ter acesso a este arquivo. No prprio programa editor, o designer gera, com base no website1.fla, o arquivo-executvel website1.swf. Este arquivo o que ser publicado online e ser acessado atravs plugin chamado Flash Player (instalado no browser).

s vezes, navegando na internet, quando tentamos acessar um website com tecnologia Flash e o mesmo no abre, recebemos um aviso do browser para instalar o plugin do Flash. Isso acontece porque em alguns casos ainda no foi instal ado o Flash Player no browser. Somente com esta instalao o browser passa a entender o arquivo-executvel de extenso *.swf , decodificando-o e mostrando o aplicativo para o usurio.

13

Tcnico em Informtica Multimdia

Espero que voc consiga identificar bem a diferena entre estes dois tipos de arquivos comuns quando se trabalha com Flash. Ajudar um pouco mais a diferenciar os mesmos, observar as Figuras abaixo. A Figura 3 mostra um arquivo chamado aula_flash.fla aberto. Por se tratar de um arquivo-fonte, est aberto no editor de Flash.

Figura 3 - Arquivo-fonte no programa editor

Fonte: O Autor (2012)

Na Figura 4, entretanto, temos o arquivo aula_flash.swf aberto. Este arquivo foi gerado previamente, a partir do aula_flash.fla. Por ser o arquivo-executvel, est aberto no Flash Player.

14

Tcnico em Informtica Multimdia

Figura 4 - Arquivo-executvel rodando no Flash Player

Fonte: O Autor (2012)

No subcaptulo a seguir, iremos apresentar um pouco melhor o software editor do Flash. Afinal, com ele que voc desenvolver boa parte dos exerccios desta disciplina.

2.4 INTRODUO AOS PAINIS DO FLASH

Apesar de vez ou outra o fabricante lanar uma nova verso do Flash (CS3, CS4, CS5...), pouca coisa em relao aos fundamentos e interface do programa mudam. Neste subcaptulo apresentaremos de modo sintetizado a interface principal do Flash visando familiariz-lo com o mesmo. Dependendo da verso ou da configurao do seu Flash, os painis abaixo apresentados podem estar em posies ou tamanhos diferentes. Mas as funes so as mesmas e eles esto sempre l, ok?

15

Tcnico em Informtica Multimdia

Vamos comear, procure no seu computador o cone para abrir o editor do Flash. Deve ser algo parecido com o apresentado na Figura 5.

Figura 5 - cone do Flash (Editor)

Fonte: O Autor (2012)

Ao abrir o Flash, voc deve se deparar com uma interface inicial conforme apresentado na Figura X. Clique em Action Script 2.0 (Figura 6), no painel CREATE NEW ao centro para criar um novo arquivo de extenso *.fla.

Figura 6 - Tela inicial do Flash

Fonte: O Autor (2012) 16

Tcnico em Informtica Multimdia

Voc ento visualizar o arquivo conforme apresentado na Figura 7 e melhor detalhado abaixo. Figura 7 - rea de trabalho do Flash

Fonte: O Autor (2012)

Painel 1 Barra de Menu Principal: Caso seu Flash no esteja parecendo com o exposto na Figura acima, clique em Window > Worskspace > Classic. Este painel o nico que fixo e permanente no Flash, atravs do qual pode-se salvar arquivos, exportar, testar animaes, dentre outros. Estaremos aprendendo mais sobre ele ao longo da disciplina, bem como os demais painis. Painel 2 Timeline (Linha de tempo): Desde sua criao o Flash principalmente um programa de animaes. Estas, nada mais so do que objetos se deslocando ao longo de um determinado tempo. Atravs da timeline possvel criar efeitos e navegaes de um aplicativo Flash, deslocando-os ao longo de tempos pr-determinados. No se preocupe se
17

Tcnico em Informtica Multimdia

voc no entendeu plenamente o conceito de animao no Flash, pois ele ser trabalhado ao longo da prxima competncia da disciplina. Painel 3 Properties (Propriedades): Durante todo o desenvolvimento dos programas no Flash, voc dever ficar de olho neste painel. Ele muda sua configurao constantemente, de acordo com o que voc estiver trabalhando no palco (parte central da tela, melhor explicado abaixo). Se o que voc est editando no Flash no momento um grfico, por exemplo, este painel mostrar as propriedades deste grfico (dimenses, cores, etc). Mas se algum efeito na Timeline, este painel mostrar propriedades especficas dela, e assim por diante. Painel 4 Stage (Palco): Efetivamente o seu arquivo Flash. O que voc coloca neste palco o que ser compilado e aparecer na verso final do seu Flash como *.swf. Painel 5 Tools (Ferramentas): Aqui voc encontrar as ferramentas com as quais poder desenhar, selecionar smbolos no palco e edit-los.

Para uma melhor familiarizao com a interface e os painis do Flash, recomendo que assista este vdeo:

Vdeo 1 Endereo: http://goo.gl/Gbzp8

Na prxima competncia voc aprender melhor como trabalhar com esta ferramenta desenvolvimento multimdia para internet.

18

Tcnico em Informtica Multimdia

DESENVOLVER

ANIMAES

PARA

USO

EM

INTERFACES

Ol, vamos comear a nos aprofundar no Flash, aprendendo os conceitos base que permitiro desenvolver seus primeiros aplicativos multimdia. Os subcaptulos a seguir apresentam vdeos que lhe ensinaro, na prtica, como trabalhar com esta plataforma. Se possvel, assistam os vdeos vrias vezes, at no precisarem recorrer aos mesmos para refazer o que explicado. Vamos l!

3.1 ANIMAO QUADRO-A-QUADRO

Seja um boto que se move quando passamos o mouse sobre ele, ou um contedo que aparece com um efeito especial na tela, qualquer que seja o movimento de elementos numa interface ele vem de uma animao. O Flash, desde sua criao, um programa para criar animaes e ser com elas que faremos muitos dos efeitos legais nas interfaces.

Todavia, preciso comear do bsico e no Vdeo 2, indicado abaixo, voc entender como manusear a Timeline (Linha do tempo) no Flash de modo que possa gerar suas primeiras animaes experimentais.

Video 2 Endereo: http://goo.gl/VC4Zz

Agora que voc j entende como funciona a Timeline no Flash, vamos partir para animaes mais avanadas.
19

Tcnico em Informtica Multimdia

3.2 ANIMAO SEMI-AUTOMTICA

Existe uma forma de criar animaes no Flash de modo semi-automatizado: Atravs do Motion Tween (Movimento Interpolado). Para tal, basta determinar quantos Frames (Quadros) sua Timeline (Linha do tempo) ter e ento adicionar o movimento, conforme bem detalhado no Vdeo 3.

Video 3 Endereo: http://goo.gl/yis0e

Apesar de ilustrado no Vdeo 3, convm destacar novamente um detalhe muito importante: Motion Tweens s podem ser realizados com Smbolos. Portanto, no esquea de converter o que ser animado num Smbolo.

As animaes por Motion Tween so o principal recurso para movimentar objetos no Flash. Estes objetos (smbolos) podem ser um menu que se abre, um contedo da interface que aparece aps o usurio clicar num boto ou mesmo alguma animao que ocorre ao fundo da interface para mant-la movimentada. importante praticar bastante este tipo de animao no Flash. Portanto,

Repita o exerccio que foi feito no Video 3 at ficar seguro e fazendo Motion Tweens sem errar.

3.3 ANIMAES EM CAMADAS

J parou pra pensar como fazer pra ter mais de um Smbolo animado ao mesmo tempo no Palco do Flash? Pois bem, cada Smbolo que estiver com Motion Tween precisa ter, obrigatoriamente, sua prpria Camada com Frames determinando seu movimento. No Vdeo 4 voc pode observar como fazer isto.
20

Tcnico em Informtica Multimdia

Video 4 Endereo: http://goo.gl/e3PLQ

muito importante perceber, conforme bem detalhado no Video 4, que apesar das Timelines serem executadas de forma sincronizada, voc pode ter um Smbolo se movimentando mais rapidamento do que o outro. Para isso voc encurta a quantidade de Frames (ou seja, encurta o tempo) daquele Smbolo que vai se movimentar mais rapidamente. Ou ainda, claro, aumenta a quantidade de Frames (aumenta a durao na Timeline) do Smbolo que voc quer que se movimente mais lentamente.

O Video 4 mostra didaticamente 2 Smbolos em 2 Camadas, mas obviamente voc pode ter quantos Smbolos quiser se movimentando no Palco, basta criar uma Camada para cada um. Lembrando que este conceito de uma Camada para cada Smbolo necessrio apenas para aqueles que tero movimentao (Motion Tween). Voc pode posicionar vrios Smbolos numa mesma Camada, desde que no pretenda moviment-los, ok?

Agora que voc j est ficando fera em manusear a Timeline, vamos aprender a fazer isso com cdigo Actionscript no subcaptulo a seguir.

3.4 MANIPULANDO A TIMELINE COM ACTIOSCRIPT

Voc j deve ter percebido que quando geramos o arquivo-executvel (*.swf) a partir do Flash que estamos trabalhando no Palco, a animao fica em loop. Ou seja, a Timeline termina e comea novamente interminavelmente. No Video 5 voc
21

Tcnico em Informtica Multimdia

aprender a usar a linguagem de programao do Flash (Actioscript) de um jeito muito fcil, de modo que possa determinar quando a Timeline deve parar ou a partir de que ponto ela deve ficar se repetindo.

Convm destacar que os cdigos Actionscript do Video 5 so inseridos em Keyframes (Quadros-chave). Pois alm de Smbolos que so posicionados no Palco, os Keyframes tambm podem armazenar Actionscript com comandos referentes Timeline. Ficar mais fcil de entender esta tcnica quando voc observar o Video 5, abaixo.

Video 5 Endereo: http://goo.gl/FrV5D

Voc deve ter pensado que seria complicado programar com Actionscript, no mesmo? O principal objetivo do Vdeo 5 foi lhe apresentar como fcil (e til) programar com esta linguagem.

3.5 MOVIE CLIPS

Algo importantssimo quando se desenvolve interfaces multimdia em Flash o uso de vrios elementos no Palco simultaneamente. As vezes, estes elementos so uma animao ocorrendo de fundo enquanto outros contedos so (tambm de modo animado) expostos pro usurio. Assim como vimos no website IRON MAN 2 no captulo anterior.

Para conseguir tal faanha, necessrio que cada um destes elementos tenha suas animaes ocorrendo independentemente umas das outras. Isso possvel com um tipo de Smbolo no Flash chamado Movie Clip.

22

Tcnico em Informtica Multimdia

Estes Smbolos possuem sua prpria Timeline interna, rodando independente das demais. Observe como criar um Smbolo com sua prpria Timeline interna no Vdeo 6

Video 6 Endereo: http://goo.gl/hHmgv

O principal objetivo do Vdeo 5 foi lhe apresentar como fcil (e til) programar com Actionscript. 3.6 INTEFACES COM BOTES O uso de botes algo fundamental para que o usurio tenha um canal a mais de interao com a interface. O clicar na tela o principal meio de interao humano computador dos websites.

O Flash possui 3 tipos de Smbolos: Grfico, Movie Clip e Boto (Button). A particularidade dos Botes que eles so Smbolos com uma Timeline interna bem especfica, dividida em 4 fases: UP, OVER, DOWN e HIT. Estas fases, arquitetadas em 4 Keyframes, possuem a funo de mostrar o Boto quando ele est sem o mouse sobre ele (UP), com o mouse sobre ele (OVER), quando clicado (DOWN) e definir a rea clicvel do Boto (HIT).

No Vdeo 7 voc poder observar como criar botes no Flash, permitindo que o usurio possa interagir com as interfaces dos websites multimdia que voc estar criando. Video 7 Endereo: http://goo.gl/W68OJ

Enfim, conclumos esta competncia. Com base nela, voc poder agora comear a desenvolver interfaces multimdia mais interessantes no Flash, como a que comearemos a produzir na prxima competncia. Bons estudos!
23

Tcnico em Informtica Multimdia

DESENVOLVER

ELEMENTOS

MULTIMDIA

PARA

INTERFACES

Nesta competncia voc desenvolver aplicativos muito interessantes, permitindo que o usurio interaja com suas intefaces de um modo mais dinmico. Com o uso de sons ou botes que manipulam a timeline, o usurio se sentir mais no controle do aplicativo, tornando-o mais agradvel de usar.

Apesar de voc ter menos vdeos ilustrando os exerccios, eles so substancialmente mais densos que os da competncia anterior. Portanto, concentre-se e repita os exerccios no seu Flash. Vamos comear!

4.1 INSERINDO SONS NO FLASH

Um conceito importante para uma interface ser agradvel oferecer feedback ao usurio. Dentre alguns recursos disponveis para isso (como um boto mudar de cor ao ser clicado) est a possibilidade de dar um feedback sonoro.

Feedback um termo usado para indicar um retorno ao usurio diante de uma ao sua. Como clicar num boto e o mesmo disparar um som indicado que foi clicado. Isso ajuda o sistema cognitivo do usurio a entender que seu comando foi aceito.

Por isso, no Vdeo 8 voc aprender como inserir sons no Flash ao mesmo tempo que aprende como integr-los com botes.

24

Tcnico em Informtica Multimdia

Video 8 Endereo: http://goo.gl/q5n1Z

O mtodo usado no Vdeo 8 para inserir sons em Keyframes de botes podem ser usados tambm para inserir sons em qualquer outro Keyframe. Por exemplo, inserir uma msica no primeiro Keyframe da Timeline principal. Experimente! Mas fique atento que cada vez que a Timeline reinicia, em loop, rodando no Flash Player, este Keyframe que contm uma msica recarregado e comea uma msica a tocar por cima de outra que j estava tocando. Portanto, se for inserir uma msica na Timeline principal, no esquea de por um stop(); em algum Keyframe pra que ela no reinicie.

4.2 MANIPULANDO A TIMELINE COM LABELS (MARCADORES)

Agora trabalharemos com o principal conceito na criao de websites em Flash: o manuseio de Movie Clips por Actionscript. Voc j deve saber que numa interface complexa, com vrios elementos animados, cada um um Movie Clip. Por exemplo, ns podemos ter um website onde temos um menu com botes e um Movie Clip ao centro com contedos dentro dele e onde cada boto leva este Movie Clip a apresentar um contedo diferente. Na verdade, exatamente assim que se arquiteta no s websites, mas boa parte dos aplicativos feitos em Flash.

Ficar mais fcil de entender essa estrutura de um Movie Clip apresentando contedos diferentes conforme os botes de um menu vo sendo clicados ao observar com ateno e fazer o exerccio proposto no Video 9. Este vdeo um pouco extenso, pois apresenta vrios conceitos ao mesmo tempo. Primeiramente, como determinar reas da Timeline com animaes pr-programadas marcadas com Labels
25

Tcnico em Informtica Multimdia

e, depois, como o usurio pode ativar essas animaes atravs de botes expostos a ele.

Video 9 Endereo: http://goo.gl/wQvpg

Figura 8 - Exerccio Proposto

Fonte: O Autor (2012)

Espero que tenha gostado do exerccio proposto no Video 9 (Figura 8). Agora voc est pronto para comear a desenolver suas primeiras interfaces interativas em Flash! Na prxima competncia vamos aprender a otimizar o tamanho dos seus arquivos, bem como trabalhar com elementos de vdeo no Palco.

26

Tcnico em Informtica Multimdia

5 CONHECER TCNICAS DE EDIO E COMPRESSO DE MDIA PARA WEB

Bem, agora vamos comear a aprender como trabalhar com outro tipo de mdia dinmica no Flash: videos!

Videos nada mais so do que uma mdia que tem uma sequncia de imagens com um temporizador, podendo ser sincronizado com um udio que fica embutido no arquivo. Por isso, esse o tipo de mdia mais pesada da internet, porque integra vrias mdias juntas.

O carregamento de um vdeo, como qualquer outro arquivo visto na internet, siginifica baixar ele para ser visualizado na mquina do usurio. Como este tipo de arquivo tem tamanhos maiores, geralmente toma mais tempo para ser carregado online.

ento que entra o Flash! Esta tecnologia to avanada para trabalhar com vdeos que criou o seu prprio formato, o *.flv, ou Flash Video. Compacta com tamanha eficincia que o site de transmisso de vdeos mais famoso da internet, o Youtube, usa esta tecnologia para apresentar vdeos.

O que ns vamos desenvolver nesta competncia a sua habilidade para importar e trabalhar com vdeos no Flash. muito fcil, basta trabalhar com o vdeo dentro de um Movie Clip, assim ele se comporta como qualquer Smbolo que ns j vimos em competncias anteriores. Observe com ateno e exercite conforme recomendado nos subcaptulos a seguir. Bom trabalho!

27

Tcnico em Informtica Multimdia

5.1 IMPORTANDO VDEO NO FLASH

Para trabalhar com vdeos no Flash, necessrio import-los ao Palco. O Flash suporta diversos formatos de vdeo, mas vez ou outra apresenta bugs por falha de codec ou limita muito o manuseio dos vdeos. Para que voc possa usar plenamente o potencial do Flash ao trabalhar com vdeos, quer seja em possibilidade de manuse-lo quer em eficincia de compactao, necessrio que o vdeo esteja no formato *.flv. Lembre-se disso! comum que os alunos encontrem problemas ao importarem videos no Flash, pois se esquecem de verificar o formato e tentam importar arquivos *.mp4, *.avi, ou mesmo *. wmv.

Codecs so programas que interpretam os arquivos de vdeo. O funcionamento parecido com um Flash Player rodando um arquivo *.swf. Normalmente os sistemas operacionais (como Windows) j possuem codecs para conseguir rodar vrios formatos de vdeo. Mas vez ou outra pode ter um formato com caractersticas especficas que precisam de um codec especial instalado para rodar.

No Video 10, a seguir, apresenta-se como simples importar arquivos *.flv no Flash. A dica mais importante lembrar-se de importar o video dentro de um Movie Clip. Pois assim como conseguimos manipular a Timeline de Movie Clips em competncias anteriores, voc conseguir manipular a Timeline do video do mesmo jeito.

Video 10 Endereo: http://youtu.be/IanQpIg_6XM

28

Tcnico em Informtica Multimdia

Agora que voc j sabe como importar video no Flash, vamos comear a aprender efeitos especiais!

5.2 EFEITO DE MSCARA

Como voc aprendeu anteriormente, muito fcil importar vdeos no Flash. Mas aps isto, mesmo alguns desenvolvedores relativamente experientes encontram dificuldades em contextualizar o vdeo importado na interface, fazendo com que ele desista da ideia de ter uma mdia to interessante compondo a mesma.

fundamental que voc aprenda a integrar vdeos na interface dos aplicativos que voc desenvolver em Flash caso queira fazer interfaces mais legais e que prendam melhor a ateno do usrio. No esquea, estimular o sistema cognitivo do usurio (sem sobrecarreg-lo, obviamente) um dos artifcios que possibilitam as interfaces multimdia serem to legais. Nada melhor para isso que algo em movimento compondo a tela.

Agora voc aprender como importar um vdeo contextualizando-o numa interface. O desafio fazer com que o vdeo usado no Video 10 seja exibido num telo, conforme ilustrado na Figura 9.

29

Tcnico em Informtica Multimdia

Figura 9 - Desafio: Passar um Video no Telo

Fonte: Wikipedia (2012)

Como colocar o vdeo encaixado num telo de um estdio? Voc j pensou nisso? O segredo um efeito especial do Flash chamado Mscara (Mask). Este efeito serve para determinar uma rea especfica de uma Camada para ser exibida no SWF, deixando invisvel tudo o que estiver fora desta rea. Ou seja, dentro do Flash posicionaremos o vdeo sobre o telo e com o uso da mscara determinaremos que somente a rea referente a este telo ir aparecer, dando o efeito de que o vdeo est dentro dele.

Obviamente ficar bem mais fcil de voc entender esta mgica quando observar a aplicao do efeito Mscara, conforme exibido no Video 11 abaixo.

Video 11 Endereo: http://youtu.be/8wxfmWTZ0UE

Na prxima competncia vamos comear a aprender alguns efeitos bastante teis no Flash, at l!
30

Tcnico em Informtica Multimdia

6 CONHECER TCNICAS DE EDIO E MONTAGEM DE VDEO PARA WEB

Ol! Espero que esteja gostando de aprender a manusear o Flash. Um conhecimento essencial para que voc consiga desenvolver suas interfaces multimdia, conseguir editar as animaes. Fazendo assim textos, imagens ou vdeos aparecerem ou sumirem da tela de modo harmonioso.

Isso se faz necessrio porque dificilmente voc poder transmitir toda a informao desejada de uma vez. Seja um banner em Flash referente a uma propaganda, um website com vrios contedos, ou mesmo uma apresentao em Flash, geralmente tem contedo demais para ser apresentado ao usurio de uma vez. Isso o sobrecarregaria de informao.

Portanto, estas informaes so transmitidas ao usurio uma de cada vez, alternando-se entre si. As tcnicas de edio vdeo, quando adaptadas ao Flash, podem auxiliar o designer a programar como essas informaes sero transmitidas uma por vez.

Para isto, podemos absorver algumas tcnicas de edio e montagem de vdeos que, quando adaptadas para modificao de propriedades de Smbolos do Flash, auxiliam o designer a organizar esta massa informacional.

Os Smbolos no Flash tem propriedades que os permitem sumir, aparecer ou mudar de cor. Nesta competncia voc aprender a realizar estas mudanas de modo animado, permitindo que voc possa coordenar como as informaes iro aparecer para o usurio de um jeito mais interessante.

31

Tcnico em Informtica Multimdia

6.1 TCNICAS DE EDIO DE VIDEO

Quando lidamos com vdeos (estamos falando de filmes mesmo), existem algumas formas como a imagem de uma cena sai da tela, e entra a outra. Por exemplo, tente lembrar de algum filme que, quando termina a cena, a tela escurece e ento reaparece com outra cena.

Isso chamado tcnica de edio. Basicamente, como edita-se a transio de cenas (imagens de vdeo). Observe abaixo algumas destas tcnicas. Fade In Transio onde a imagem comea totalmente escura e vai aparecendo. Fade Out Transio onde a imagem est visvel e vai escurecendo totalmente. Wipe Transio onde uma linha passa pela tela, eliminando uma imagem e substituindo-a por outra. Corte Mudana instantnea de uma imagem em outra. Fuso Mudana gradual onde uma imagem vai sumindo e outra vai aparecendo sobre ela simultaneamente.

Observe exemplos destas tcnicas de edio no Vdeo 12 abaixo.

Video 12 Endereo: http://youtu.be/euPshRBqpSU

Agora vamos observar as propriedades do Flash que nos permitiro fazer estes efeitos manualmente.

32

Tcnico em Informtica Multimdia

6.2 MODIFICANDO PROPRIEDADES DOS SMBOLOS

Seja uma transio de uma imagem totalmente escura para aquilo que ns queremos ver como acontece no Fade In, ou o sumir de uma imagem com o aparecimento de outra por cima como ns temos na Fuso, as propriedades da imagem (no caso o Smbolo no Flash) so alteradas.

Todos os Smbolos no Flash (Grfico, Movie Clip ou Boto) tm a opo de terem suas propriedades grficas modificadas, acessando o painel Properties

(Propriedades) e ento a aba Color Effect.

L encontraremos 4 opes de modificao grfica do Smbolo, conforme apresentado na Figura 10 e melhor detalhado adiante.

Figura 10 - Propriedades grficas de Smbolos no Flash

Fonte: O Autor (2012)

33

Tcnico em Informtica Multimdia

Brightness (Brilho) Gradualmente possvel escolher quanto de preto (100%) ou branco (100%) estar sobre o Smbolo. Tint (Tom de cor) Gradualmente possvel escolher o quanto de uma cor desejada estar sobre o Smbolo. Advanced (Avanado) Nesta opo possvel escolher o quanto ser adicionado ao Smbolo em cada um dos 3 eixos de cores (Vermelho, Verde ou Azul), bem como o quanto de Transparncia (Alpha) ter o mesmo, simultaneamente. Alpha (Transparncia) Gradualmente opta-se o quanto um Smbolo dever estar transparente (0%) ou plenamente visvel (100%).

6.3 UTILIZANDO TCNICAS DE EDIO NO FLASH

Voc j deve estar imaginando como fazer para realizar aquelas tcnicas de edio apresentadas no Video 12 atravs da modificao grfica dos Smbolos no mesmo? Se pensou em fazer as transies via Motion Tween, pensou certo!

S que para modificao animada dos Color Effects (Efeitos de cores) no Flash, o ideal usar tipo de Tween diferente dos anteriormente exercitados. Estamos falando do Classic Tween.

Com ele possvel colocar num Keyframe como voc quer que um Smbolo esteja no comeo da animao e no Keyframe seguinte como este mesmo Smbolo estar modificado. Assim ns podemos fazer Smbolos sumirem ou aparecerem, bem como escurecerem ou voltarem ao normal ao longo da Timeline.

Ficar mais fcil de entender como fazer as tcnicas de edio usando Classic Tweens ao observar com ateno e exercitar o exemplo apresentado no Vdeo 13 abaixo.
34

Tcnico em Informtica Multimdia

Video 13 Endereo: http://youtu.be/knk3FGi65Tc

Espero que voc tenha gostado de aprender como trabalhar com essa excelente ferramenta de edio multimdia que o Flash. Com os conhecimentos adquiridos nessa disciplina voc poder comear a desenvoler suas primeiras aplicaes para internet compostas de imagem, som e vdeo. Parabns pela dedicao!

35

Tcnico em Informtica Multimdia

REFERNCIAS

WE CHOOSE THE MOON. Figura 1 Website Multimdia. Disponvel em http://wechoosethemoon.org. Acessado em Nov 2012.

WIKIPEDIA. Figura 9 Desafio: Passar um Video no Telo. Disponvel em http://goo.gl/5GXF8. Acessado em Dez 2012

36

Tcnico em Informtica Multimdia

CURRCULO DO PROFESSOR-PESQUISADOR

O Professor Dino Lincoln Figueira graduado em web design pela Faculdade Marista do Recife. Possui mestrado e doutorado em design de artefatos digitais pela UFPE, sendo o primeiro PhD do Brasil em design formado por uma universidade federal. Possui experincia superior a 10 anos no mercado, principalmente no desenvolvimento de aplicativos

multimdia para internet e CD-ROM. Tambm professor de programas de graduao e ps-graduao em design, engenharia de software, administrao de empresas e aviao civil em instituies como Faculdade Marista do Recife, UFPE, CESAR e UNINASSAU, dentre outras.

37