Material EAD - Informatica - Multimidia
-
Upload
juliamayara -
Category
Documents
-
view
162 -
download
0
Transcript of Material EAD - Informatica - Multimidia
-
Tcnico em Informtica Multimdia
1
Tcnico em Informtica
Multimdia
-
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.
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
15
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?
-
Tcnico em Informtica Multimdia
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)
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)
-
Tcnico em Informtica Multimdia
17
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
26
e, depois, como o usurio pode ativar essas animaes atravs de botes expostos a
ele.
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.
Video 9
Endereo: http://goo.gl/wQvpg
-
Tcnico em Informtica Multimdia
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!
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
Fonte: O Autor (2012)
-
Tcnico em Informtica Multimdia
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.
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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
-
Tcnico em Informtica Multimdia
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.