Material EAD - Informatica - Multimidia

Tcnico em Informtica Multimdia

1

Tcnico em Informtica

Multimdia


2

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.


3

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.


4

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


5

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


6

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


7

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 CD-

ROMs interativos.


8

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!

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.


9

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


10

conexes discadas e relativamente lentas, mesmo estas aplicaes simples eram

pesadas e demoravam a carregar.

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)

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.


11

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


12

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.


13

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 instalado 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.


14

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.


15

Figura 4 - Arquivo-executvel rodando no Flash Player


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?


16

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)


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



17

Voc ento visualizar o arquivo conforme apresentado na Figura 7 e melhor

detalhado abaixo.

Figura 7 - rea de trabalho do Flash


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


18

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:

Na prxima competncia voc aprender melhor como trabalhar com esta

ferramenta desenvolvimento multimdia para internet.

Vdeo 1

Endereo: http://goo.gl/Gbzp8


19

3 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.

Agora que voc j entende como funciona a Timeline no Flash, vamos partir para

animaes mais avanadas.

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


20

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.

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. Portanto,

importante praticar bastante este tipo de animao no Flash.

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.

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

Repita o exerccio que foi feito no Video 3 at ficar

seguro e fazendo Motion Tweens sem errar.


21

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

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


22

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.

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.

Video 5

Endereo: http://goo.gl/FrV5D


23

Estes Smbolos possuem sua prpria Timeline interna, rodando independente das

demais. Observe como criar um Smbolo com sua prpria Timeline interna no Vdeo 6

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.

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!

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

Video 7

Endereo: http://goo.gl/W68OJ


24

4 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.

Por isso, no Vdeo 8 voc aprender como inserir sons no Flash ao mesmo tempo que

aprende como integr-los com botes.

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.


25

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

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


26

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

ele.

Figura 8 - Exerccio Proposto


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.

Video 9

Endereo: http://goo.gl/wQvpg


27

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!


28

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.

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.

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.

Video 10

Endereo: http://youtu.be/IanQpIg_6XM


29

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.


30

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.

Na prxima competncia vamos comear a aprender alguns efeitos bastante teis no

Flash, at l!

Video 11

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


31

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.


32

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.

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

efeitos manualmente.

Video 12

Endereo: http://youtu.be/euPshRBqpSU


33

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



34

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.


35

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!

Video 13

Endereo: http://youtu.be/knk3FGi65Tc


36

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


37

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.

Documents

Material EAD - Informatica - Multimidia