Caderno de INFO (Multimídia 2015.2

Multimdia
Ewerton Menezes de Mendona
Curso Tcnico em Informtica

Educao a Distncia
2015
EXPEDIENTE
Professor Autor
Ewerton Menezes de Mendona
Design Instrucional
Deyvid Souza Nascimento
Maria de Ftima Duarte Angeiras
Renata Marques de Otero
Terezinha Mnica Sincio Beltro
Reviso de Lngua Portuguesa
Letcia Garcia
Diagramao
Izabela Cavalcanti
Coordenao
Joo Ferreira
Coordenao Executiva
George Bento Catunda
Coordenao Geral
Paulo Fernando de Vasconcelos Dutra
Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao

Profissional de Pernambuco, em convnio com o Ministrio da Educao
(Rede e-Tec Brasil).
Agosto, 2015
M539m
Mendona, Ewerton Menezes de.
Multimdia : Curso Tcnico em Informtica : Educao a
distncia / Ewerton Menezes de Mendona. Recife: Secretaria
Executiva de Educao Profissional de Pernambuco, 2015.
66 p.: il.
Inclui referncias bibliogrficas.
1. Educao a distncia. 2. Computao. 3. Multimdia. 4.

Aplicativos grficos. I. Mendona, Ewerton Menezes de. II. Ttulo.
III. Secretaria Executiva de Educao Profissional de Pernambuco.
IV. Ministrio da Educao. V. Rede e-Tec Brasil.
CDD 004
CDU 681.3
Sumrio
Introduo .............................................................................................................................................. 8
1.Competncia 01 | Conhecer os Princpios de Multimdia para a Web ............................................. 10
1.1 Multimdia ................................................................................................................................................ 10
1.2 Breve histrico ......................................................................................................................................... 11
1.3 Tecnologia HTML 5 ................................................................................................................................... 12
1.4 Google web designer ............................................................................................................................... 13
1.5 Interface do Google web designer ........................................................................................................... 14
1.5.1 rea de trabalho ................................................................................................................................... 18
1.5.2 Barra de ferramentas ............................................................................................................................ 19
1.5.3 Linha do tempo ..................................................................................................................................... 20
1.5.4 Painis ................................................................................................................................................... 20
2.Competncia 02 | Desenvolver Elementos Multimdia para Interfaces ........................................... 22

2.1 Criando um novo documento .................................................................................................................. 22
2.2 Ferramentas caneta e forma.................................................................................................................... 24
2.2.1 Adicionando uma forma ....................................................................................................................... 25
2.2.2 Desenhando com a ferramenta caneta ................................................................................................ 26
2.2.2.1 Desenhando linhas retas com a ferramenta caneta .......................................................................... 26
2.2.2.2 Desenhando linhas curvas com a Ferramenta Caneta....................................................................... 27
2.2.2.3 Desenhando formas fechadas com a Ferramenta Caneta ................................................................. 27
2.2.2.4 Adicionando e removendo pontos de fixao ................................................................................... 27
2.3 Utilizando imagens e vdeo ...................................................................................................................... 28
2.3.1 Importar imagens ou vdeos ................................................................................................................. 28
2.3.2 Adicionar imagens ou vdeos arrastando do seu computador ............................................................. 29
2.3.3 Adicionar imagens e vdeos arrastando-os a partir da Biblioteca de recursos ..................................... 30
2.3.4 Imagens SVG ......................................................................................................................................... 30
2.4 Ferramenta Texto..................................................................................................................................... 31

2.5 Ferramenta Tag ........................................................................................................................................ 31
2.6 Trabalhando com posio, tamanho e outras propriedades dos elementos .......................................... 33
2.6.1 Para mover um ou mais objetos no cenrio ......................................................................................... 33
2.6.2 Para girar um objeto ............................................................................................................................. 33
2.6.3 Para redimensionar um objeto ............................................................................................................. 33
2.6.4 Alinhar e distribuir objetos ................................................................................................................... 34
2.6.5 Organizando as camadas ...................................................................................................................... 34
2.7 Aplicando cores a elementos ................................................................................................................... 36
2.7.1 Misturador de cores .............................................................................................................................. 36
2.7.2 Gradientes ............................................................................................................................................. 37
2.7.3 Ajustando o gradiente........................................................................................................................... 38
2.8 Ferramenta 3D ......................................................................................................................................... 39
2.9 Rotacionando um objeto 3D .................................................................................................................... 40
3.Competncia 03 | Desenvolver Animaes Multimdia para Interface............................................ 42

3.1 Animao pelo Modo Rpido ................................................................................................................... 42
3.1.2 Animando pelo Modo Rpido ............................................................................................................... 43
3.1.3 Reproduzindo uma Animao ............................................................................................................... 44
3.1.4 Alterando as transies entre as cenas ................................................................................................ 44
3.2 Animao pelo Modo Avanado .............................................................................................................. 45
3.3 Criando uma animao no Modo Avanado ............................................................................................ 46
3.3.1 Animaes em Loop .............................................................................................................................. 47
3.3.2 Fluxo de Animao ................................................................................................................................ 48
3.3.3 Animaes Aninhadas ........................................................................................................................... 49
4.Competncia 04 | Manipulando a Timeline com Labels (Marcadores) ............................................ 51

4.1 Criando um Evento................................................................................................................................... 51
4.2 Adicionando Eventos Linha do Tempo .................................................................................................. 56

4.3 Adicionar Rtulos Linha do Tempo ....................................................................................................... 56
5.Competncia 05 | Conhecer Tcnicas de Edio e Montagem de Vdeo para Web ........................ 58

5.1 Componente udio .................................................................................................................................. 58
5.2 Componente Vdeo .................................................................................................................................. 60
5.3 Componente Galeria Carrossel ................................................................................................................ 61
5.4 Publicando seu Trabalho .......................................................................................................................... 63
Concluso ............................................................................................................................................. 64
Referncias ........................................................................................................................................... 65
Minicurrculo do Professor ................................................................................................................... 66
Introduo
Caro (a) aluno (a), este caderno a principal fonte de conhecimento para o curso. Nele voc
encontrar as informaes necessrias para seu aprendizado. No entanto, ele no a nica fonte. A
internet rica em contedo e poder fornecer mais conhecimento. O AVA (Ambiente Virtual de
Aprendizagem) tambm possui ferramentas para lhe ajudar no desenvolvimento das atividades,
como o frum.
Mesmo com todas essas fontes, a responsabilidade maior para aprender do aluno. O aprendizado
construdo mais efetivamente com o uso do conhecimento exposto. durante a produo das
atividades e at na reproduo dos exemplos que o entendimento testado e dvidas surgem. Por
vezes, ser necessrio reler alguns pontos deste caderno, ou fazer uma consulta por mais
informaes na internet, ou colocar a dvida no frum. Tudo isto faz parte da metodologia adotada
por esta forma de aprendizado. Assim, imprescindvel que voc sempre refaa os exemplos dados
e os exerccios sugeridos. Copiar trabalhos apenas ir atrapalhar seu aprendizado. Se voc no
entendeu na primeira vez, continue tentando at compreender.
Esta disciplina focada no desenvolvimento de criao multimdia. Para isto utilizamos o programa
Google Web Design, que, apesar de relativamente novo, uma poderosa ferramenta no
desenvolvimento de contedo multimdia para a internet.
O caderno est dividido em cinco competncias. Na primeira competncia iremos Conhecer os

princpios de multimdia para a web, o que multimdia, quais as tecnologias que existiram at
agora, qual o programa que iremos utilizar para criar contedo multimdia e como sua interface.
Na segunda competncia iremos Desenvolver elementos multimdia para interfaces, veremos
como criar os diversos elementos necessrios para compor uma animao, como ilustraes,
imagens, texto, udio, vdeo, etc. Na terceira competncia iremos Desenvolver animaes para uso
em interfaces. Na quarta competncia iremos Manipular a linha do tempo. Na ltima competncia
iremos Conhecer tcnicas de edio e montagem de vdeo para a web.
Seu desempenho depende de quanto tempo voc vai dedicar ao curso. No s assistindo s aulas e
lendo o caderno, mas, principalmente, pelas horas de prtica que voc investe para o aprendizado.
Lembre-se de que quanto mais, melhor.
Bons estudos.
Competncia 01
1.Competncia 01 | Conhecer os Princpios de Multimdia para a Web

Iniciamos nossa disciplina conhecendo os conceitos fundamentais sobre multimdia destinado para
pginas web. Mas no paramos por a. Vamos mais alm e teremos o primeiro contato com o
Google Web Design.
Iremos comear conhecendo uma definio para multimdia que ir nos guiar durante a disciplina,
depois passaremos por um breve histrico para conhecer melhor a rea. Essa parte importante
para um bom entendimento profissional. Conheceremos, ento, a tecnologia que provavelmente
estar por mais tempo no futuro na criao de elementos multimdia para a web, o HTML 5. Para
finalizar teremos o primeiro contato com o Google Web Designer. Apesar de podermos codificar
tudo em HTML 5 em um editor de texto simples, uma IDE como o Google Web Designer ir nos
ajudar e tornar mais rpida a criao de contedo multimdia.
Ficou curioso? Ento no percamos mais tempo. Continue a ler e bom aprendizado.
1.1 Multimdia
Segundo Chapman & Chapman 2000 e Fluckiger (1995), multimdia a combinao, controlada por
computador, de pelo menos um tipo de mdia esttica, que pode ser texto, fotografia, grfico, com
pelo menos um tipo de mdia dinmica, como vdeo, udio, animao.
No comeo da web a exibio das informaes em sites web utilizava de mdia esttica para
alcanar a transmisso de informao. Com a popularizao da internet, chamar a ateno do
usurio e facilitar a compreenso da mensagem que era transmitida tornou-se mais relevante.
Assim, meios de utilizar som, animao e vdeos comearam a ser desenvolvidos.
Dessa forma, a transmisso e a recuperao por mais de um meio sensorial de uma informao - ou
seja, mais de um sentido humano - esto envolvidas no processo e so vistas como mensagens
10
Competncia 01
multimdia. O termo ficou mais conhecido no meio computacional quando o som e o vdeo
passaram a fazer parte da dia a dia dos usurios.
1.2 Breve histrico
Esquea quase tudo que voc conhece hoje sobre internet, deixando apenas texto e imagem, talvez
um ou outro gif animado horrvel e um arquivo de msica eletrnica como nos vdeo games antigos.
Este o cenrio multimdia nos anos 90.
Na busca por melhores qualidades multimdia, a Microsoft libera o DHTML, uma linguagem de
marcao que acrescenta o D de dinmico. Assim, elementos HTML, utilizando o JavaScript,
poderiam correr pelo tempo e espao do navegador. Mas s funcionava no Internet Explorer. No
entanto, ele no era o nico navegador e, naquela poca, se voc utilizasse o DHTML tinha que ter a
garantia do usurio usar o IE.
Outras empresas entraram na briga com outra estratgia. Ao invs de construir um navegador do
zero, construram plug-ins. Plug-ins so pequenos aplicativos que ampliam a capacidade do
programa nativo. Assim, teramos um plug-in para cada navegador que existisse. Com isto tivemos o
Real Player, o Schokwave, Future Splash, Java, entre outros.
O Future Splash parecia ser a melhor opo dentre as tecnologias da poca e foi comprada pela
empresa Macromedia, mudando de nome para Flash. O Flash cresceu e esmagou os concorrentes.
Tudo o que se imaginava fazer, o Flash fazia ou faria na prxima verso. Os sites multimdia
cresceram vertiginosamente e artistas faziam seus milagres com a tecnologia.
Por muito tempo o plug-in Flash foi a soluo para todos os problemas e os designers viveram um
mar de rosas. No entanto, rosas possuem espinhos e a tecnologia Flash no era aberta, ou seja,
estava merc dos mandos e desmandos de uma empresa, e empresas visam lucro.
Assim, a Adobe, desenvolvedora do Photoshop, compra a Macromedia. E como meia internet
11
Competncia 01
estava com os olhos pregados no contedo Flash, incluindo os anncios nos sites, isto incomodou
outras empresas.
As discusses em torno de para onde a web estava indo voltou os olhos para o contedo multimdia
e uma nova estruturao da tecnologia HTML. A nova verso do HTML deveria contemplar o
contedo multimdia. E, depois de muita discusso, de idas e vindas, lanado o HTML 5 com a
promessa de substituir o Flash.
Nesta poca temos o incio da era mobile. Celulares se transformaram em computadores com
sistemas operacionais e operadoras disponibilizaram servios de internet cada vez melhores.
Evolumos! Mas o contedo Flash no era exibido nos iPhones. Em declarao imprensa, o CEO da
Apple, Steve Jobs, declara que no aceitar o Flash em seu sistema mobile por motivos de
segurana e desempenho. Ao mesmo tempo o contedo Flash inchou e precisou de mais recursos,
diminuindo seu desempenho. O Flash exigia demais dos computadores e era completamente
invivel para o ambiente mobile. O HTML 5 era a opo mais sustentvel. Um padro aberto,
ningum era dono, e, ao mesmo tempo, tambm era livre de plug-in. O navegador era quem fazia
todo o trabalho. Para pr uma pedra no assunto a Google bloqueou o contedo Flash em seu
navegador Chrome, seguido pelo Mozilla Firefox.
At a prpria Adobe no v futuro em continuar com a guerra e j desenvolve programas de

desenvolvimento para HTML 5. Se o mercado continuar como vai, o Flash ser esquecido no futuro
e o HTML 5 reinar como um padro aberto e livre. A cada ms o HTML 5 cresce e melhora para
alcanar mais necessidades dos criadores multimdia. O futuro promete.
1.3 Tecnologia HTML 5
Como voc viu no subcaptulo anterior a tendncia que o Flash seja substitudo pelo HTML 5. H
vrias empresas engajadas nisto. Mas o que o HTML 5?
Diferente do Flash, que possui um plug-in proprietrio que precisa ser baixado e instalado no
12
Competncia 01
navegador, o HTML 5 todo processado no prprio navegador. responsabilidade do navegador

executar corretamente os arquivos do HTML 5. Assim, cada desenvolvedor dos navegadores atuais
implantam seu cdigo seguindo o padro, e isto o melhor do HTML 5, ele um padro livre.
Ningum precisa pagar para segui-lo.
Na verdade o HTML 5 um nome comercial. Ele juno de trs linguagem: o HTML, o CSS e o
JavaScript. O HTML contextualiza o elemento, ele diz que aquilo aquilo e no aquilo outro, ele
tambm define uma hierarquia para os elementos. O CSS define as configuraes de exibio do
elemento, como sua posio, cores, tamanho, etc. J o JavaScript uma linguagem de programao
onde podemos definir eventos e comportamentos para os elementos, alm de dar movimento, e
movimento animao.
Quer ver o que possvel fazer com HTML 5? Acesse o endereo abaixo. um clip multimdia
totalmente produzido com a tecnologia.
www.thewildernessdowntown.com/
Mas voc deve estar se perguntando, eu preciso aprender tudo isso para fazer um contedo
multimdia?. Bem, precisar, no precisa, mas voc ser um profissional bem melhor se conhecer.
Poder mais e melhor, conhecendo bem os padres. No entanto, utilizaremos uma IDE, que um
Integrated Development Environment, ou em bom portugus, ambiente integrado de
desenvolvimento, que far o trabalho pesado de codificao para ns. O que seria uma IDE?
Veremos isto no prximo tpico.
1.4 Google web designer
Voc pode fazer qualquer contedo multimdia utilizando apenas um editor de texto simples como
o Bloco de Notas do Windows e conhecendo os padres web: HTML, CSS e JavaScript. Mas algumas
cenas so to complexas que certamente precisamos de ajuda. Na verdade uma grande ajuda. Com
isso, temos os programas que fazem este servio e os chamamos de IDE, sigla em ingls para
Ambiente de Desenvolvimento Integrado.
13
Competncia 01
O HTML 5 novo mas j possui algumas IDEs disponveis. At a prpria Adobe possui o Adobe Edge
Animate. Mas a gigante Google disponibilizou um aplicativo que faz o mesmo servio
gratuitamente, o Google Web Designer.
Alm de ajudar a construir a programao necessria para os elementos dinmicos, o Google Web
Designer possui ferramentas para ilustrao, desenvolvimento 3D e uma biblioteca que o ajuda a
integrar o site com servios da Google.
Google Web Designer

www.google.com/webdesigner
A ferramenta ainda est no incio de desenvolvimento e promete crescer, oferecendo novos

recursos a cada verso, mas j est estvel o suficiente para fazer anncios e at sites multimdia.
Figura 1 Marca do Google Web Designer

Fonte: prprio autor.
1.5 Interface do Google web designer
O Google Web Designer, GWD a partir de agora, uma ferramenta nova que ainda est em
desenvolvimento e possui limitaes. Mas sua gratuidade, apesar de no ser de cdigo aberto, nos
d vantagens em relao a outras opes. Como foi dito anteriormente, o desenvolvimento do
HTML 5 todo feito em arquivos de texto simples, assim, at o Bloco de Notas do Windows pode
ser usado para produo, apenas vai dar mais trabalho.
14
Competncia 01
Figura 2 Interface do Google Web Design

O GWD est na verso 1.4.2.0915, no qual este caderno foi baseado, e disponibilizado para Mac
10.7.x ou posterior, Windows 7 ou posterior, e Linux (Debian/Ubuntu/Fedora/openSUSE). Seu
processo de instalao no sistema operacional Windows igual a qualquer aplicativo desse sistema.
Sem complicao.
Neste subcaptulo apresentamos a interface do GWD. Observe a Figura 2, ele parece ser um
programa complicado, mas no . Primeiro voc deve conhecer cada parte dele para saber onde
fica aquilo que voc precisa para construir o contedo multimdia.
Quando iniciamos o GWD nos so apresentadas as opes de Criar novo arquivo, Figura 3. Nela
podemos Clicar na frase em azul para abrir um arquivo existente, ou podemos clicar nos cones de
Novo arquivo, para iniciar um projeto do zero, ou Modelos para utilizar um modelo pr-fabricado
para acelerar o processo.
15
Competncia 01
Figura 3 Abertura do GWD, opes de Criar novo arquivo.

O contedo multimdia pode ser utilizado para construir desde sites e anncios, entre outros
artefatos digitais, tudo utilizando HTML 5. A Google construiu o GWD com ferramentas direcionadas
para a criao de anncios para a rede de anncios AddWords e possui modelos prontos para isto, e
para o DoubleClick tambm, Figura 4. Temos modelos de anncios direcionados para celulares e
web sites de vrios tipos. Voc ainda pode criar modelos prprios e eles so exibidos em Meus
Modelos. O gerenciador ainda pode filtrar os modelos baseados no que voc digitar na caixa de
texto Filtrar por:.
Alguns modelos so de propagandas intersticiais, uma pea publicitria que toma toda a tela ou
fica no formato de uma janela que surge inesperadamente na frente de uma pgina web em um
site.
16
Competncia 01
Figura 4 Gerenciador de modelos do GWD.

Mas nem s de anncios vive a ferramenta. Da mesma forma em que criamos um banner, podemos
criar um web site inteiro, bastando aumentar seu tamanho. Escolhendo a opo Novo arquivo
podemos fazer o que quisermos. Selecionando esta opo teremos a tela da Figura 5.
Figura 5 rea de trabalho do GWD.

17
Competncia 01
O GWD tem uma rea central destinada construo dos projetos e a edio de cdigos. Esta rea
cercada por uma barra de ferramentas, uma barra de opes da ferramenta, uma linha do tempo
e um conjunto de painis que permitem realizar diversas aes, como modificar elementos,
adicionar componentes e adicionar eventos. Observe a localizao delas na Figura 6.
Figura 6 1. Painel de ferramentas; 2. Painel de opes da ferramenta; 3. Linha do tempo;4. Cor, Propriedades,
Componentes, Eventos, CSS e painis da Biblioteca de recursos.
1.5.1 rea de trabalho

A rea de trabalho no centro da interface do GWD possui dois modos: o modo Design e o modo
Cdigo. No modo Design o espao de trabalho exibe suas imagens, texto e outros elementos visuais,
exibindo-os da forma como sero vistos em um navegador. No modo Cdigo a rea mostra o cdigo
em HTML/CSS necessrio para se construir o que est na visualizao.
A barra de visualizao permite escolher entre os modos "Design" e "Cdigo", visualizar o HTML,
publicar seu anncio e alterar o nvel de zoom na pgina em que voc estiver trabalhando.
Figura 7 Barra de visualizao.

18
Competncia 01
1.5.2 Barra de ferramentas
A barra de ferramentas agrupa ferramentas para a criao e manipulao de elementos na rea de

trabalho. A barra possui ferramentas para texto, desenho, cores e elementos 3D.
Figura 8 Tabela com as ferramentas e suas respectivas descries.

Fonte: https://support.google.com/webdesigner/answer/3187129?hl=pt-BR&ref_topic=3249465&vid=1-63579
0704379186261-2157043334
19
Competncia 01
1.5.3 Linha do tempo
Animaes nada mais so do que a variao de atributos dos elementos ao longo do tempo. A linha
do tempo exibe as mudanas nos elementos de acordo com o tempo. O tempo da mudana do
elemento marcado em um frame-chave.
A Linha do tempo possui dois modos de exibio: o modo Rpido e o modo Avanado. No modo
Rpido so exibidas as miniaturas dos momentos onde o cenrio muda. No modo Avanado so
exibidos os momentos onde os frames-chaves sofrem alteraes.
Figura 9 Exibio da linha do tempo no modo rpido e no modo avanado. Apenas um dos modos visto de cada
vez.
04379186261-2157043334
1.5.4 Painis
A seo de painis da interface contm os painis Cor, Propriedades, Componentes, Eventos, CSS e
Biblioteca de recursos. Os painis podem ser minimizados ou arrastados para uma posio diferente
na seo de painis.
20
Competncia 01
Figura 10 Sesso painis. Na figura est sendo exibido o painel Cor enquanto
os outros esto ocultos.
21
Competncia 02
2.Competncia 02 | Desenvolver Elementos Multimdia para Interfaces

Ol! Nesta competncia vamos ver como criar e transformar elementos que formaro nosso
contedo multimdia atravs do GWD.
O GWD foi desenvolvido para a criao de anncios, mas nada impede de se fazer um site animado
com ele. Depois de criado, o anncio pode ser inserido em qualquer pgina atravs da tag <iframe>
no HTML.
2.1 Criando um novo documento
No menu Arquivo selecione Novo arquivo, Figura 11.
Figura 11 Menu arquivo.

Isso abre a caixa de dilogo "Novo arquivo em branco". No lado esquerdo temos opes para
anncios, que sero inseridos em uma pgina, e outros tipos de documento. A opo HTML cria
uma pgina padro, sem limites. A opo HTML com pginas cria uma pgina HTML que possui
reas que o GWD tambm chama de pginas. Assim, na opo Banner o contedo est apenas em
uma pgina; a opo Expansvel possui duas pginas, uma visvel e outra que aparece quando a
22
Competncia 02
outra pgina clicada; a opo Intersticial possui vrias pginas que so exibidas quando algum
elemento clicado. A diferena que as pginas de um anncio do GWD esto todas em uma
pgina HTML. Ento, para o GWD pginas no correspondem a outro arquivo HTML.
Selecione as opes da Figura 12.
Figura 12 Caixa de dilogo Criar novo arquivo em branco.

Ambiente: seleciona o padro para uso dos planos de anncio j configurados. Se voc no
utilizar nenhum plano, selecione Anncio que no do Google.
Dimenses: so tamanhos padres para anncios. Em Personalizado voc pode dizer nos
campos ao lado a largura e altura do contedo multimdia que voc criar.
Nome: ser o identificador do anncio nos sistemas de anncio disponveis e o nome do
arquivo inicial.
Local: onde os arquivos do projeto sero armazenados no disco rgido.
Modo de animao: Seleciona o modo de animao utilizado. Pode ser modificado
posteriormente.
23
Competncia 02
Outra forma seria utilizar um modelo. O GWD disponibiliza vrios modelos prontos.
Quando terminar clique no boto Ok e ir aparecer a rea de trabalho correspondente a Figura 13.
Figura 13 rea de trabalho com um novo documento criado.

2.2 Ferramentas caneta e forma
As ferramentas Caneta e Forma criam imagens em uma tag chamada <canvas>, que corresponde a
uma tela de pintura. Os elementos de tela so usados para criar imagens rapidamente no
navegador usando uma linguagem de script como o JavaScript. O GWD gera os scripts desses
objetos em segundo plano quando voc usa essas ferramentas para criar imagens. As imagens
inseridas nos elementos da tela no podem ser alteradas usando a animao da linha do tempo. A
tag que abrange a tela pode ter uma animao (para mover toda a tag), mas a cor ou forma da
imagem na tela no pode ser animada. Observe na Figura 14 onde fica o boto Forma que abre o
menu para seleo da funo.
24
Competncia 02
Figura 14 Boto Caneta e Forma e o menu de seleo da funo.

2.2.1 Adicionando uma forma

A ferramenta de forma permite desenhar formas geomtricas bsicas, como formas ovais,
retngulos e linhas, na rea de trabalho.
Para criar um desenho em forma de linha, retngulo ou oval, clique na ferramenta "Forma" no
painel de ferramentas, selecione a forma no menu pop-up e arraste a forma no cenrio para o
tamanho desejado. Observe na Figura 15.
Figura 15 Ferramenta Linha selecionada e trs formas na rea de trabalho.

Na barra de opes da ferramenta, possvel ainda definir atributos de trao e cor, o raio do canto
dos retngulos e o raio interno das formas ovais. Depois de criar uma forma, voc pode selecion-la
na rea de trabalho e modificar as propriedades no painel de propriedades. Observe na Figura 16
que com a Ferramenta Retngulo selecionada a barra de opes muda e apresenta opes como a
cor do trao, preenchimento, tamanho do trao e cantos arredondados.
Figura 16 Painel opes exibindo as opes de criao de retngulos.

25
Competncia 02
Arraste com a ferramenta de forma enquanto pressiona a tecla Shift para restringir o desenho:
Oval: restringe a um crculo;
Retngulo: restringe a um quadrado;
Linha: restringe os ngulos a incrementos de 45.
2.2.2 Desenhando com a ferramenta caneta

A ferramenta Caneta permite desenhar linhas e curvas, criando pontos de fixao que so
conectados por linhas retas ou curvas. Tambm possvel criar caminhos fechados para gerar
formas mais complexas. Junto com a ferramenta de forma, a ferramenta Caneta cria o contedo
dentro de uma tag <canvas>.
2.2.2.1 Desenhando linhas retas com a ferramenta caneta
1.
Clique na ferramenta "Forma" na barra de ferramentas.
2.
Selecione a opo "Caneta" no menu pop-up.
3.
Clique no ponto do cenrio onde voc deseja que o primeiro segmento de linha comece.
4.
Clique novamente no ponto onde voc deseja que o segmento termine.
5.
Continue clicando para definir pontos de fixao para segmentos retos adicionais. O ponto
de fixao ativo parece maior, indicando que est selecionado. Os pontos de ancoragem anteriores
so desmarcados medida que voc adiciona novos pontos.
Figura 17 Seleo e utilizao da Ferramenta Caneta para construir retas. O quadrado verde maior na forma o
ponto de ancoragem ativo.
26
Competncia 02
2.2.2.2 Desenhando linhas curvas com a Ferramenta Caneta
Voc desenha uma curva criando e arrastando pontos de fixao para gerar alavancas de controle
que definem a forma da curva. O comprimento e direo das alavancas de controle determinam o
grau de curvatura.
Figura 18 Seleo e utilizao da Ferramenta Caneta para construir curvas. Cada ponto de ancoragem possui dois
pontos de controle quando so curvas, que determinam a curvatura da linha.
2.2.2.3 Desenhando formas fechadas com a Ferramenta Caneta
Para uma forma receber um preenchimento ela deve ser fechada. Para desenhar um caminho
fechado, crie uma forma com a ferramenta Caneta. Para fechar a forma, faa o ltimo clique sobre
o ponto de fixao inicial.
Figura 19 Ao final do desenho, para fechar a forma, d o ltimo clique no primeiro n.

2.2.2.4 Adicionando e removendo pontos de fixao
Voc pode adicionar ou remover pontos de fixao em seus caminhos usando as opes da
ferramenta Caneta na barra de opes.
Para adicionar pontos ao caminho, selecione a opo de Adicionar Ponto na barra de opes e em
27
Competncia 02
seguida clique no caminho para adicionar outro ponto de fixao.
Para remover pontos do caminho, selecione o cursor de Remover Ponto na barra de opes e, em
seguida, clique no ponto que voc deseja remover. O caminho mudar para se ajustar aos pontos
restantes.
Figura 20 Destacadas esto as opes de adicionar n ao caminho e remover n.

Com estas ferramentas voc pode criar as formas de que precisa para fazer os desenhos de seu
contedo multimdia.
2.3 Utilizando imagens e vdeo
O GWD permite que voc adicione recursos de imagem e vdeo de diversas formas. Ele sempre far
uma cpia da imagem ou vdeo em uma pasta de recursos na pasta do projeto, mantendo-os juntos.
O GWD oferece suporte a imagens nos formatos .jpeg, .jpg, .gif, .png, .svg e .bmp, bem como a
vdeos nos formatos .ogg, .mp4 e .webm.
2.3.1 Importar imagens ou vdeos
A partir do menu "Arquivo", selecione "Importar recursos". Selecione o arquivo ou os arquivos

que voc deseja importar usando a caixa de dilogo. Os recursos aparecero na rea de trabalho e
na Biblioteca de recursos.
28
Competncia 02
Figura 21 Menu Arquivo, opo Import recursos...

2.3.2 Adicionar imagens ou vdeos arrastando do seu computador
Selecione a imagem ou o vdeo que voc deseja usar com o sistema de arquivos do computador.
Arraste a imagem ou o vdeo para a rea de trabalho.
Figura 22 Arrastando um arquivo de imagem para o GWD.

possvel arrastar vrios recursos dessa forma. Aps adicion-los, os tamanhos desses recursos
sero mantidos.
29
Competncia 02
2.3.3 Adicionar imagens e vdeos arrastando-os a partir da Biblioteca de recursos
Na Biblioteca de recursos, selecione os recursos da imagem ou do vdeo que voc deseja usar
clicando no nome deles. Arraste os recursos para a rea de trabalho.
Figura 23 Arraste um recurso da Biblioteca de Recursos para a rea de trabalho.

2.3.4 Imagens SVG

Imagens SVG so vetoriais. So criadas por programas de edio vetorial como Corel Draw, Adobe
Illustrator e o gratuito Inkscape. possvel usar o Google Web Designer para fazer tipos especficos
de edies em imagens SVG importadas. Alm disso, as propriedades de preenchimento de formas
podem ser alteradas, como cor e transparncia, assim como as propriedades de trao, como cor,
espessura, junes e linhas tracejadas.
Para fazer a edio de uma imagem SVG, aps a importao de um arquivo SVG, possvel editar
esse arquivo da mesma forma que um grupo. Para editar a imagem, clique duas vezes nela de
maneira a entrar no modo de edio. Cada elemento poder ser selecionado separadamente.
Utilize o painel "Estilo" do painel de propriedades para efetuar as mudanas.
30
Competncia 02
2.4 Ferramenta Texto

A ferramenta Texto permite que voc crie reas de texto no anncio ou na pgina HTML. Alm
disso, voc modifica seu texto com as ferramentas de edio j conhecidas, alterando fontes,
tamanhos, formatao, layout e tipo de elemento HTML. As opes na barra de opes so bem
intuitivas e seus cones muito semelhantes a qualquer processador de texto. A nica diferena a
primeira opo porque o GWD coloca o texto dento de uma tag <div> por padro.
Figura 24 Adicionando um texto com a Ferramenta Texto. Observe na barra de opes as configuraes possveis
para texto.
2.5 Ferramenta Tag

O HTML composto por tags que dizem o tipo e a hierarquia da informao. Pode ser que voc
precise acrescentar uma tag ao documento, para agrupar e/ou hierarquizar melhor os elementos.
Voc pode adicionar tags de qualquer tipo a seus documentos usando a ferramenta tag. A
ferramenta tag permite que voc clique e arraste para posicionar a tag onde desejar. A ferramenta
tag tem como padro as tags <div>.
Para adicionar uma nova tag ao documento clique na ferramenta tag no painel de
ferramentas. Selecione o tipo de tag no painel de opes da ferramenta.
Para escolher uma tag div, clique no cone do elemento div;
Para escolher uma tag img, clique no cone de elemento de imagem;
31
Competncia 02
Para escolher uma tag de vdeo, clique no cone de elemento de vdeo;
Para escolher outras tags, clique no cone de tag personalizada e digite o nome do elemento
que voc deseja criar no campo da tag. O campo preenchido automaticamente no caso de tags
HTML5.
Arraste a ferramenta na rea de trabalho para criar a tag. Ao arrastar, voc poder ver o tamanho e
as dimenses da rea da div.
Por vezes voc pode precisar colocar uma tag dentro da outra, hierarquizando o contedo. Para isto
crie uma tag que voc quer executar como tag principal, assim como uma tag div. Escolha a
ferramenta Seleo no painel de ferramentas. Clique duas vezes na tag principal desejada. A tag
principal ter, ento, um contorno vermelho, e deixar de ser selecionvel. Crie uma nova tag
clicando no boto Ferramenta Tag na barra de ferramentas. Observe que o boto est selecionado
na barra de ferramentas da Figura 25. A nova tag ser uma tag dependente da tag principal que
voc criou. Voc poder clicar duas vezes na nova tag se quiser aninhar seus elementos ainda mais.
Para voltar ao nvel de pgina, clique duas vezes no cenrio. Use a localizao atual acima da linha
do tempo para passar a um nvel especfico de vrios divs aninhados. Observe na Figura 25 a
localizao de nveis destacada com um retngulo vermelho. Na figura a tag <div> principal est
destacada em vermelho e a nova tag <div> interna est em seu interior, em azul.
Figura 25 Criao de tags e destaque do localizador de nveis. Na Figura

temos uma <div> dentro de outra.
32
Competncia 02
2.6 Trabalhando com posio, tamanho e outras propriedades dos elementos

A ferramenta Seleo permite que voc selecione os elementos clicando neles ou clicando e
arrastando em uma rea retangular em torno deles. Depois de selecionados, os elementos podem
ser movidos ou alinhados a outros objetos.
2.6.1 Para mover um ou mais objetos no cenrio

Clique na ferramenta de seleo na barra de ferramentas. Selecione um objeto clicando nele ou
desenhando uma marca de seleo em torno dele. Como opo, clique em outro objeto enquanto
pressiona a tecla "Shift" para adicion-lo seleo. Clique e arraste os objetos selecionados.
Como opo voc pode utilizar as teclas de seta para descolar o objeto em um pixel. Pressione a
tecla Shift junto com as teclas de setas para mover a seleo 10 pixels.
2.6.2 Para girar um objeto
No painel de ferramentas, clique na ferramenta de seleo. Verifique se a caixa de seleo Controle

de transformao est marcada no painel de opes da ferramenta. Selecione o objeto ou os
objetos. O controle de rotao (dois anis aninhados) aparecer no meio da seleo.
Alternativamente, mude o centro de rotao arrastando o controle de rotao a partir do anel
interno. Gire a seleo arrastando o anel externo do controle de rotao.
Como opo, segure a tecla Shift ao arrastar para limitar a rotao acrscimos de 45.
2.6.3 Para redimensionar um objeto
No painel de ferramentas, clique na ferramenta de seleo. Verifique se a caixa de seleo Controle

de transformao est marcada no painel de opes da ferramenta. Selecione o objeto ou os
objetos. Os elementos selecionados sero marcados por uma caixa delimitadora azul. Arraste um
dos pontos de controle nos lados ou cantos da caixa delimitadora. Como alternativa, segure a tecla
33
Competncia 02
Shift ao arrastar para manter a proporo original da seleo.
Figura 26 Utilizando a ferramenta Seleo para modificar as propriedades do objeto. Em

destaque a ferramenta de seleo (seta) e o controle de transformao. Os controles s
aparecem se ele estiver marcado. O crculo maior no meio do retngulo o controle de
rotao.
2.6.4 Alinhar e distribuir objetos
Voc tambm pode alinhar e distribuir vrios objetos no cenrio usando os controles opcionais no
painel de opes da ferramenta.
Figura 27 Em destaque as ferramentas de alinhamento e distribuio de objetos.

2.6.5 Organizando as camadas
Cada elemento no Google Web Designer est, em seu prprio nvel, em uma pilha de todos os
34
Competncia 02
elementos, Figura 28. Os elementos mais prximos da parte superior da pilha cobrem os elementos
abaixo. Para alterar a camada de cada elemento, voc pode selecionar o elemento com a
ferramenta de seleo e usar os seguintes botes de camadas que esto ao lado dos botes de
alinhamento e distribuio.
Figura 28 Tabela com a descrio de cada boto de camada.

Fonte: https://support.google.com/webdesigner/answer/3241090?hl=pt-BR&ref_topic=6281626
&vid=1-635790704379186261-2157043334.
Figura 29 Exibio 3D de uma pgina web com os nveis de cada elemento.

Fonte: http://devlup.com/wp-content/uploads/2012/01/3d-1.png.
35
Competncia 02
2.7 Aplicando cores a elementos
possvel ajustar o trao e a cor de preenchimento de elementos SVG, HTML e de tela usando as
ferramentas de cor. Ela exibe trs opes: Ferramenta Preencher, Ferramenta Trao e Ferramenta
Gradiente.
Figura 30 Ferramenta de cor selecionada e suas opes amostra.

2.7.1 Misturador de cores
O misturador de cores aparece quando voc clica no cone de seleo de cor, Figura 31. Para
selecionar uma cor, clique na barra de cores e no misturador para selecionar o matiz ou a
tonalidade desejados. Use o campo Alfa para alterar a transparncia da cor escolhida. Um valor de 0
completamente transparente, enquanto um valor de 100 completamente opaco. Depois de
selecionar a cor s clicar no elemento para colori-lo.
O processo de colorir o trao o mesmo. Voc deve apenas selecionar a ferramenta Preenchimento
de Trao, Figura 32.
36
Competncia 02
Figura 31 A cor selecionada aparece na barra de opes.

Figura 32 Para modificar o Trao ou a Borda voc deve selecionar o Estilo tambm.
2.7.2 Gradientes
Um gradiente um preenchimento de vrias cores no qual cada cor alterada gradualmente at

chegar seguinte. Os gradientes podem ser aplicados borda e ao preenchimento de elementos
SVG, HTML e de <canvas>. O GWD pode criar dois tipos de gradiente: lineares e radiais.
Para aplicar um gradiente, linear ou radial, no misturador de cores, selecione o tipo de gradiente
que voc deseja. Logo abaixo tem uma barra de cor com duas etiquetas abaixo, uma em cada canto.
Selecione cada uma delas e escolha a cor da esquerda e a da direita. Quando terminar, clique no
elemento para mudar seu preenchimento.
37
Competncia 02
Voc pode criar gradientes mais complexos clicando no meio da barra de gradiente para surgir
novas etiquetas de cor no meio do gradiente, e selecionando a cor para ela.
O mesmo pode ser feito com a borda, mas alguns navegadores ainda no so compatveis com o
gradiente de borda. Ento, evite-os.
Figura 33 Misturador de canais com a opo de ferramenta gradiente linear em destaque.

2.7.3 Ajustando o gradiente
Aps a aplicao de um gradiente linear a um objeto, o gradiente pode ser ajustado por meio dos
manipuladores que aparecem quando o objeto selecionado com a ferramenta Gradiente. H trs
manipuladores de controle vermelhos no controle do gradiente, dois para redimensionamento e
um para rotao do gradiente, Figura 34 e 35.
38
Competncia 02
Figura 34 Ferramenta Gradiente destacada e os controladores ajustados de um gradiente

linear.
Figura 35 Controladores de um gradiente radial. Em destaque est a opo para ajuste da

borda ou preenchimento.
Clicando duas vezes no controlador central do preenchimento ele volta para o centro do elemento.
2.8 Ferramenta 3D
O GWD pode fazer animaes com elementos em 3D. Este tipo de animao mais complicado
porque por vezes voc precisa ver os elementos de outro ngulo para poder saber o que est mais a
frente e o que est mais atrs.
39
Competncia 02
Para reorientar a visualizao em 3D do seu projeto, clique na ferramenta Girar cenrio 3D e, em

seguida, use o mouse para mudar seu ponto de vista. Voc pode girar livremente o objeto clicando
e arrastando em qualquer lugar, exceto nas alavancas de rotao codificadas por cores. No entanto,
voc tem mais controle ao girar um objeto e um eixo de cada vez. Por exemplo, arraste o anel
vermelho para fazer com que a visualizao do cenrio seja girada ao redor do eixo x global.
A mudana de ponto de vista s usada para visualizar o layout em 3D, ou seja, ela no afeta
trabalhos visualizados ou publicados. Elas servem apenas para lhe ajudar a localizar os elementos
nos trs eixos.
Selecione Visualizao frontal, Visualizao superior ou Visualizao lateral no menu "Visualizao"

para ver o cenrio diretamente a partir dos eixos x, y ou z. Clique duas vezes na ferramenta "Girar
cenrio 3D" para retornar visualizao selecionada.
Figura 36 Em destaque a ferramenta Alternar Cenrio 3D.

2.9 Rotacionando um objeto 3D
Para alterar a rotao de um objeto em trs dimenses, selecione o elemento desejado, clique na
ferramenta Alternar Objeto 3D e, em seguida, use o mouse para mudar a rotao.
40
Competncia 02
Voc pode girar livremente o objeto clicando e arrastando em qualquer lugar, exceto nas alavancas
de rotao codificadas por cores. No entanto, voc tem mais controle quando gira um eixo por vez
em um objeto. Por exemplo, arrastar o anel vermelho far com que o objeto gire em torno do eixo x
global.
Tambm possvel alterar o ponto de rotao clicando e arrastando o anel interno do controle.
Voc tambm pode segurar a tecla Shift enquanto o arrasta para restringir a rotao a acrscimos
de 45.
Figura 37 Em destaque a ferramenta Alternar Objeto 3D.

Abaixo (seta) no painel de animao veja como ser mostrado o objeto pelo ponto de
viso do usurio.
Com isto encerramos esta competncia. Nas prximas, agora com os elementos criados, vamos
anim-los.
41
Competncia 03
3.Competncia 03 | Desenvolver Animaes Multimdia para Interface

Nesta competncia vamos aprender como animar os elementos criados na competncia anterior.
Teremos vrios conceitos importantes que precisam de muita ateno e dedicao na prtica para
melhor entendimento. Esta parte mais complicada, talvez seja necessrio ler o caderno mais de
uma vez para melhor compreenso.
A primeira coisa que o GWD possui dois modos de animao. Um mais simples, que no te d
muita liberdade, e um mais avanado, que exige um conhecimento maior. Para uma animao mais
complexa utilize o modo avanado, para isto clique no cone "Modo avanado", Figura 38, para
alternar para o Modo avanado.
Figura 38 Linha do tempo no modo rpido. Em destaque o boto para alternar para o
modo avanado.
Ento? Vamos comear?
3.1 Animao pelo Modo Rpido
No Modo Rpido, voc cria sua animao cena a cena. Voc adiciona uma nova visualizao de toda
42
Competncia 03
a pgina, muda os elementos que deseja animar e, como opo, modifica os tempos e a fluidez da
transio. No modo Rpido, uma animao comea em uma cena e termina na prxima. Neste
modo no tem como animar individualmente os elementos. Como dito, a animao feita cena a
cena.
3.1.2 Animando pelo Modo Rpido

Para animar utilizando o Modo Rpido, primeiro organize todos os elementos do anncio,
posicionando onde voc quer que eles estejam quando a animao comear. Clique ento no boto
Adicionar cena, Figura 39. Altere os elementos que voc deseja animar. Essa alterao pode incluir
o movimento e a rotao dos elementos, mudando a cor, o tamanho ou qualquer outro parmetro.
V adicionando cenas e modificando os elementos at terminar.
Ao lado do boto de Adicionar cena temos outro boto com um cone de lixeira, que serve para
excluir a ltima cena.
Figura 39 Na figura temos duas cenas em uma pgina. Em destaque o boto para incluir
uma nova cena.
43
Competncia 03
3.1.3 Reproduzindo uma Animao
medida que voc cria suas animaes, clique no boto "Reproduzir", Figura 40, na parte superior
da linha do tempo da animao para ver como elas sero exibidas. O boto ser substitudo por um
quadrado vermelho. Clique nele para parar.
Para repetir a reproduo, clique no boto "Loop" ao lado do boto "Reproduzir" e inicie a
reproduo.
A reproduo da animao s serve para voc visualiz-la. Ou seja, no possvel fazer edies ou
alteraes nos arquivos enquanto as animaes so reproduzidas, e o trabalho visualizado ou
publicado no sofre modificaes.
Figura 40 Em destaque o boto Visualizar animao.

3.1.4 Alterando as transies entre as cenas
Clique no cone Transio entre as cenas, Figura 41. Aparecer um display com a configurao da
transio. Nela voc pode modificar o tempo da transio e o fluxo da animao, conhecido no
ramo da animao como easing.
44
Competncia 03
Figura 41 Em destaque as configuraes para uma transio. Entre as cenas fica o boto de
transio.
3.2 Animao pelo Modo Avanado

No modo Avanado, cada elemento tem uma camada individual na linha do tempo da animao.
Dessa forma, possvel alterar o local em que cada elemento est localizado na pilha de elementos,
ou ainda ocultar e bloquear elementos para voc trabalhar de forma mais eficaz.
No modo Avanado possvel fazer a animao individual de qualquer elemento e, como opo,
modificar os tempos de transio e o fluxo de cada animao.
Figura 42 Modo de Animao Avanado onde so exibidas duas linhas de tempo separadas, a da bola amarela
e a vermelha. Ainda temos uma camada para Eventos e outra com a configurao da camada. O tempo da
animao de pouco mais de dois segundos.
45
Competncia 03
3.3 Criando uma animao no Modo Avanado

As animaes no GWD funcionam baseadas em frames-chave. Um frame-chave mostrado na linha
de tempo por um losango. Ele marca o momento e a transformao sofrida pelo elemento. O GWD
cria o fluxo entre cada frame-chave para gerar a animao.
Figura 43 Nesta Figura a bola vermelha possui 4 frames chave em sua linha de tempo, enquanto a bola amarela
possui 5 frames chave.
Para adicionar um frame-chave, existem vrias formas:
Elementos individuais: clique com o boto direito na linha do tempo do elemento onde voc
deseja incluir o frame-chave e selecione Inserir frame-chave no menu pop-up.
Elementos individuais e vrios elementos: selecione as faixas da linha do tempo nas quais
voc deseja adicionar os frames-chave, clique na linha do tempo em que voc deseja inseri-los e
pressione F6.
Elementos individuais e vrios elementos: selecione as faixas da linha do tempo nas quais
voc deseja adicionar os frames-chave, clique na linha do tempo em que voc deseja inseri-los e
selecione Linha do tempo > Adicionar frame-chave no menu "Editar".
Assim que um frame-chave inicial tiver sido definido, se voc modificar algum elemento na rea de
trabalho ser criado outro frame-chave para esta alterao.
46
Competncia 03
Uma vez criado o frame-chave, altere as propriedades dos elementos nos quais voc deseja criar a
animao. Essa alterao pode incluir o movimento e a rotao dos elementos, mudando a cor, o
tamanho ou qualquer outro parmetro.
Os frames-chave so os pontos inicial e final de uma parte da animao. Voc pode aumentar o
tempo da animao, desacelerando a animao, aumentando o espao entre os frames, ou diminuir
o tempo, acelerando a animao, diminuindo o espao entre os frames. Para isto basta selecionar o
frame e arrast-lo para esquerda ou direita. O espao entre os frames chamado de intervalo.
Na Figura 43 observe uma linha azul na linha do tempo. Ele chamado playhead e a posio
mostrada na rea de trabalho. possvel arrastar o playhead para frente e para trs a fim de acessar
diferentes pontos na linha do tempo e testar a animao.
3.3.1 Animaes em Loop

s vezes, definimos uma animao e queremos que ela repita por uma quantidade de vezes ou
infinitamente. Para isto clique no cone de loop, Figura 44, na camada de animao que voc deseja
executar em loop. Ir abrir um menu pop-up. Selecione uma das opes:
Nenhum: a animao no ser executada em loop;
Determinado: o nmero de vezes que a animao ser executada em loop;
Infinito: a animao ser executada em loop infinitamente.
Figura 44 cone de Loop em destaque e menu pop-up Looping de animao. Observe uma sombra na linha de
tempo indicando a repetio automtica.
Loop um termo usado no meio da animao para indicar um processo de repetio.
47
Competncia 03
3.3.2 Fluxo de Animao
O fluxo de animao entre os animadores profissionais conhecido como easing. O easing permite
alterar a acelerao e a desacelerao de uma transio. O Google Web Designer oferece cinco
tipos de easing padro definidos na especificao CSS3, bem como uma opo de easing
personalizado no modo Linha do tempo avanada.
Figura 45 Tabela com os fluxos de animao padro do CSS 3.

Para fazer um easing personalizado, na linha de tempo avanada, selecione um intervalo com o
boto direito e no menu que aparece selecione Efeito de easing. Ser exibido o pop-up da Figura
46. Para ajustar a curva de easing, arraste as alas de controle. O ngulo da ala de controle
48
Competncia 03
determina a quantidade de curva, e o comprimento da ala controla a fora de acelerao ou

desacelerao. Faa vrios testes para entender bem como funciona a curva. A qualidade do
animador est no domnio do fluxo de animao.
Figura 46 Pop-up com as configuraes de easing da animao.

As bolas que apontam para a curva controlam-na.
3.3.3 Animaes Aninhadas
H uma linha do tempo de animao individual para cada continer principal. Em muitos casos,
voc criar uma linha do tempo para toda a pgina. Ao utilizar a animao aninhada, colocar todo
o contedo da pgina em uma nica linha do tempo.
Quando voc fizer o aninhamento de um conjunto de tags dentro de outro, cada continer principal
ter sua prpria linha do tempo de animao. Isso significa que possvel criar animaes
complexas ao aninhar uma animao dentro de outra.
Para criar uma animao aninhada:
1.
Crie uma tag que voc deseja executar como tag principal, como uma tag <div>.
2.
Clique na ferramenta Seleo no painel de ferramentas.
3.
Clique duas vezes na tag principal desejada. A tag principal ter, ento, um contorno
vermelho e deixar de ser selecionvel.
49
Competncia 03
4.
Adicione seus elementos grficos e anime-os usando os modos Avanado ou Rpido. Os
elementos e a animao estaro na tag principal que voc criou.

5.
Para retornar ao nvel da pgina, clique duas vezes no cenrio. Agora tambm possvel
animar o div principal.
Figura 47 A nova tag <div> o retngulo em vermelho.

Nela temos uma nova linha do tempo independente da linha de tempo da pgina.
50
Competncia 04
4.Competncia 04 | Manipulando a Timeline com Labels (Marcadores)

O contedo multimdia no apenas formado por imagens, udio, vdeo e animaes, tambm
possui interatividade. A interatividade conseguida com eventos. Evento algo que acontece, claro
que no qualquer coisa, algo esperado. No caso do HTML, um clique um evento possvel, o
apertar de uma tecla tambm.
O legal dos eventos no o que acontece, mas o que acontecer depois do evento ocorrer.
Podemos associar aes que sero executadas quando determinados eventos ocorrerem. E com o
GWD isto muito fcil!
4.1 Criando um Evento

A criao de um evento no GWD realizada por uma sequncia de passos.
Primeiro precisamos de um Destino. Um Destino um elemento que receber o evento. Receber
um clique, por exemplo. Mas para um elemento ser um Destino, ele precisa possuir um ID.
Assim, com o elemento que ser nosso Destino selecionado, v ao painel Propriedade, Figura 48, e
no campo ID, identificador, escreva um nome simples.
Figura 48 Painel Propriedades com o elemento crculo laranja selecionado. O nome escolhido para o Destino foi
laranja.
51
Competncia 04
Agora, no Painel Eventos clique no cone de +, e ir aparecer um pop-up com a lista de Ids da
pgina, Figura 49. Selecione o Id do destino que voc definiu anteriormente. Ele ser o elemento
que receber o evento.
Figura 49 Em destaque o boto para abrir a janela pop-up de criao de evento. No pop-up temos os possveis
Destinos, incluindo o destino laranja.
Caso se arrependa da escolha, pode clicar nas setas azuis acima da janela pop-up para retornar para
alguma aba.
Depois de escolhido o Destino, agora hora de escolher o Evento. Os tipos dos eventos aparecem
dependendo do tipo do elemento de Destino. Observe a Figura 50, a janela mostra dois tipos de
eventos: Mouse e Toque. Clicando em Mouse os eventos relacionados a eles aparecem. No caso
para estabelecer um evento de clique, selecione click.
52
Competncia 04
Figura 50 Em destaque o boto para abrir a janela pop-up de criao de evento. No pop-up temos os possveis
Destinos, incluindo o destino laranja.
Depois de definido o evento que inicia a ao, devemos dizer qual a ao. Na guia Ao temos
vrios tipos de aes possveis. Vamos fazer um elemento desaparecer. Para isso iremos modificar
uma propriedade estilstica, o CSS, que quem define o estilo dos elementos. Selecione Definir
estilos em CSS, como na Figura 51.
Figura 51 Guia Ao com a lista de aes possveis. Para alterar as propriedades de algum elemento deve-se
mudar as propriedades do CSS.
53
Competncia 04
Mas de qual elemento iremos mudar o CSS?
na guia Destinatrio que iremos definir este elemento. Novamente o elemento destinatrio deve
ter um Id para ser listado aqui. Vamos selecionar o Id page1 que o elemento que guarda todos os
nossos elementos de teste. Observe na Figura 52.
Figura 52 Guia Destinatrio. Selecionamos o elemento que sofrer as modificaes do CSS.

Ele deve possuir um ID para ser listado aqui.
Agora devemos definir as configuraes, ou seja, aquilo que queremos que acontea nas
propriedades do destinatrio e como ocorrer. Podemos adicionar vrias modificaes nas
propriedades, como posio, cor, transparncia, etc. Para isto, vamos clicar no cone de + e
escrever uma propriedade CSS. muito bom que voc conhea sobre CSS para poder utilizar todo o
potencial da tecnologia. Por exemplo, para fazer um elemento desaparecer, devemos digitar
opacity com o valor de 0. Podemos definir o easing e o tempo da ao. Observe na Figura 53.
54
Competncia 04
Figura 53 Guia Configuraes. Na Figura temos a configurao de opacity do elemento destinatrio definida para
0, invisvel, com efeito de easing, fluxo de animao, como linear e durao de 0,5, meio segundo.
Ao final, clique em Salvar e voc ver o evento definido no Painel Eventos, Figura 54. Caso queira
apag-lo, selecione e clique no boto de lixeira ao lado do boto de +. Caso queira editar, d dois
cliques no evento.
Figura 54 Painel Eventos com um evento definido.

Para ver o funcionamento clique no boto de Visualizao e selecione o navegador que ir ver a
animao.
55
Competncia 04
4.2 Adicionando Eventos Linha do Tempo
s vezes, queremos que um evento seja disparado (acionado) quando o playhead passa por um
determinado frame. Para isto, observe que na linha do tempo temos uma camada como o nome
Eventos. Nela podemos adicionar um evento a qualquer frame. Para isto basta clicar com o boto
direito do mouse em cima do frame que ir receber o evento e selecionar Adicionar evento...,
Figura 55.
Um losango ir aparecer no frame. D dois cliques nele e proceda como se fosse um evento normal.
Lembre-se de que no caso de elementos aninhados, os elementos devem possuir Ids configurados
para receber eventos.
Figura 55 Adicionando eventos em um frame da linha do tempo. Lembre-se de usar a camada Eventos.
Para remover um evento na linha do tempo clique com o boto direito no evento a ser removido e
selecione Remover evento no menu pop-up.
4.3 Adicionar Rtulos Linha do Tempo
Podemos nomear frames, marcando-os, para direcionar o fluxo de animao para estes frames.
Assim, podemos pular partes da animao e voltar utilizando eventos. Estes nomes so chamados
de Rtulos.
Para isto, clique no frame que deseja adicionar um rtulo com o boto direito do mouse, na camada
Eventos. Selecione a opo Adicionar rtulo..., como na Figura 55. Ir aparecer uma caixa de texto
56
Competncia 04
para voc digitar o nome do rtulo.
Ao pressionar enter o rtulo ser adicionado linha de tempo, na camada eventos, Figura 56.
Figura 56 Rtulo incio adicionado na camada Eventos.

Para remover o rtulo ou renomear, clique com o boto direito no rtulo e selecione a opo
adequada para a ao.
Pronto!
Treine estes conhecimentos at entend-los. Atravs da prtica eles ficaram mais fceis. Depois
disso, a criatividade o limite.
Um ltimo conselho. Coloque nomes de identificadores e rtulos simples, sem acentos, espaos ou
caracteres especiais. s vezes, os navegadores encrencam um pouquinho com eles.
57
Competncia 05
5.Competncia 05 | Conhecer Tcnicas de Edio e Montagem de Vdeo

para Web
O GDW possui uma coleo de componentes integrados. Um componente uma funcionalidade
pronta e personalizvel que voc pode adicionar em seu contedo multimdia.
O GWD j vem com vrios componentes prontos como:
Galeria Alternvel;
Galeria Carrossel;
Galeria 360;
Vdeo;
YouTube;
udio;
Entre outros.
Voc pode adicionar novos componentes da www.richmediagallery.com/ apenas baixando o

arquivo zip da galeria e adicionando utilizando o Painel Componentes.
Basicamente eles funcionam todos do mesmo modo, mas vamos utilizar alguns para voc pegar o
ritmo.
5.1 Componente udio
O componente udio adiciona um player para tocar um arquivo de udio durante a animao. Para
isso v at o Painel Componente, clique e arraste o componente udio para o cenrio e solte. Ir
aparecer uma tag representando o componente, Figura 57. A tag mostra a rea onde os controles
aparecero se forem configurados para aparecer.
58
Competncia 05
Figura 57 Painel Componentes com a Guia udio destacada.

Na rea de trabalho a figura representativa do componente adicionado.
Para que o udio toque preciso que o arquivo esteja na pasta do projeto. Ento, no se esquea
de copiar o arquivo de udio para ela.
Agora voc precisa definir as configuraes do componente na guia Propriedades do Componente,

Figura 58. Certifique-se de que o componente est selecionado. Primeiro voc deve colocar um
nome ao componente. Em origem coloque a URL de onde est o arquivo de udio. Se ele estiver na
pasta do projeto, basta colocar o nome do arquivo. Voc pode utilizar arquivos do tipo mp4, ogg e
wav.
59
Competncia 05
Figura 58 Painel Propriedades exibindo as Propriedades do componente.

Na Figura 59 voc encontra uma tabela com as opes e uma explicao. Caso o udio no toque,
observe as opes configuradas.
Figura 59 Tabela com as opes das propriedades do componente udio.

5.2 Componente Vdeo
O componente Vdeo adiciona um player de vdeo ao anncio. Da mesma forma que voc fez com o
componente de udio, clique e arraste um componente de vdeo do painel Componentes para o
cenrio.
Depois copie o arquivo de vdeo para a pasta do projeto. Se fizer isto em Origem basta colocar o
60
Competncia 05
nome do arquivo.
Agora v ao painel Propriedades e configure o componente. As opes so as mesmas do

componente udio, Figura 60.
Figura 60 Painel Propriedades exibindo as Propriedades do componente Vdeo.

Para visualizar o resultado, clique no boto Visualizar, no canto inferior esquerdo, na Figura 57.
5.3 Componente Galeria Carrossel
Entre os componentes prontos do GWD temos algumas galerias. Vamos aprender como usar a
Galeria Carrossel.
Novamente, na Guia Componentes, selecione e arraste o componente Galeria carrossel para

cenrio, Figura 61.
61
Competncia 05
Figura 61 Painel Componentes com a Guia udio destacada.

Na rea de trabalho a figura representativa do componente adicionado.
Agora v ao painel Propriedades e configure as Propriedades do componente. No se esquea de

colocar um nome no componente. Este nome necessrio para que as funcionalidades aconteam.
Para este componente voc no precisa copiar os arquivos para a pasta do projeto. Ele possui um
boto ao lado do campo Imagens para selecionar os arquivos que sero exibidos na galeria, Figura
62. A descrio com o restante das opes pode ser vista na Figura 63.
Figura 62 Selecionando arquivos de imagem para serem exibidos na galeria carrossel.

62
Competncia 05
Figura 63 Tabela com as opes das propriedades do componente Galeria Carrossel.

90704379186261-2157043334
Para ver o resultado clique no boto Visualizar.
5.4 Publicando seu Trabalho

O contedo multimdia produzido no GWD, como dito logo no incio, todo escrito em HTML, CSS e
JavaScript. Para inserir em uma pgina voc cria uma tag <iframe> com o tamanho de seu contedo
e o direciona para a pgina principal dele.
Tudo que voc produz fica em uma pasta nomeada e localizada por voc logo no incio do trabalho.
s copiar ela para o local de seu site. Com o <iframe> apontando para a pgina principal de seu
contedo, ele ser visualizado corretamente.
63
Concluso
Espero que voc tenha se divertido em aprender a produzir contedo multimdia utilizando o
Google Web Designer tanto quanto eu em produzir este caderno. Mas lembre-se de que a
qualidade de seu trabalho depende da quantidade de horas praticadas no aprendizado da
ferramenta. Seria muito bom tambm que voc aprendesse a tecnologia que a ferramenta utiliza:
HTML, CSS e JavaScript. Assim, voc poder compreender e fazer mais e melhor.
O contedo multimdia fantstico e enriqueceu muito a experincia com a internet, mas ele
depende da criatividade de quem utiliza. No comeo, quando voc ainda est aprendendo, bom
copiar as ideias de que voc mais gosta, mas um bom profissional produz boas ideias, no as copia.
atravs da prtica e treinamento que voc desenvolver a criatividade e far belssimos trabalhos
originais.
At a prxima.
64
Referncias
GOOGLE Web Designer [Internet]. Central de Ajuda do Google Web Designer. Disponvel em:
<https://support.google.com/webdesigner/?hl=pt-BR#topic=3249465>. Acesso em: 10 nov. 2015.
ROBBINS, Jeninifer Niederst. Aprendendo Web Design: guia para iniciantes. 3.ed. Porto Alegre:
Bookman, 2010.
ZEMEL, Tcio. Web design responsivo: pginas adaptveis para todos os dispositivos. So Paulo:
Casa do Cdigo, 2012.
SILVA, Mauricio Samy. CSS3: desenvolva aplicaes web profissionais com o uso dos poderosos
recursos de estilizao das CSS3. So Paulo: Novatec Editora, 2012.
SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo
em cascata. So Paulo: Novatec Editora, 2008.
SILVA, Mauricio Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. So Paulo:
Novatec Editora, 2008.
SILVA, Mauricio Samy. JQuery: a biblioteca do programador Javascript. 2.ed. So Paulo: Novatec
Editora, 2010.
65
Minicurrculo do Professor
Ewerton Mendona formado em Sistemas de Informao pela UPE e Design pela UFPE, com mestrado em
Cincia da Computao pela UFPE. Atualmente, professor da Faculdade de Cincias e Letras de Caruaru
FAFICA e professor substituto no IFPE em Belo Jardim. Possui experincia na rea de desenvolvimento WEB e
design grfico desde 1998.
66

Caderno de INFO (Multimídia 2015.2

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Caderno de INFO (Multimídia 2015.2

Загружено:

Авторское право:

Доступные форматы

Multimdia

Ewerton Menezes de Mendona

Curso Tcnico em Informtica

Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao

1. Educao a distncia. 2. Computao. 3. Multimdia. 4.

2.Competncia 02 | Desenvolver Elementos Multimdia para Interfaces ........................................... 22

2.4 Ferramenta Texto..................................................................................................................................... 31

3.Competncia 03 | Desenvolver Animaes Multimdia para Interface............................................ 42

4.Competncia 04 | Manipulando a Timeline com Labels (Marcadores) ............................................ 51

4.2 Adicionando Eventos Linha do Tempo .................................................................................................. 56

5.Competncia 05 | Conhecer Tcnicas de Edio e Montagem de Vdeo para Web ........................ 58

O caderno est dividido em cinco competncias. Na primeira competncia iremos Conhecer os

1.Competncia 01 | Conhecer os Princpios de Multimdia para a Web

1.2 Breve histrico

Assim, a Adobe, desenvolvedora do Photoshop, compra a Macromedia. E como meia internet

At a prpria Adobe no v futuro em continuar com a guerra e j desenvolve programas de

1.3 Tecnologia HTML 5

navegador, o HTML 5 todo processado no prprio navegador. responsabilidade do navegador

1.4 Google web designer

Google Web Designer

A ferramenta ainda est no incio de desenvolvimento e promete crescer, oferecendo novos

Figura 1 Marca do Google Web Designer

1.5 Interface do Google web designer

Figura 2 Interface do Google Web Design

Figura 3 Abertura do GWD, opes de Criar novo arquivo.

Figura 4 Gerenciador de modelos do GWD.

Figura 5 rea de trabalho do GWD.

1.5.1 rea de trabalho

Figura 7 Barra de visualizao.

1.5.2 Barra de ferramentas

A barra de ferramentas agrupa ferramentas para a criao e manipulao de elementos na rea de

Figura 8 Tabela com as ferramentas e suas respectivas descries.

1.5.3 Linha do tempo

2.Competncia 02 | Desenvolver Elementos Multimdia para Interfaces

2.1 Criando um novo documento

No menu Arquivo selecione Novo arquivo, Figura 11.

Figura 11 Menu arquivo.

Selecione as opes da Figura 12.

Figura 12 Caixa de dilogo Criar novo arquivo em branco.

utilizar nenhum plano, selecione Anncio que no do Google.

campos ao lado a largura e altura do contedo multimdia que voc criar.

Nome: ser o identificador do anncio nos sistemas de anncio disponveis e o nome do

Local: onde os arquivos do projeto sero armazenados no disco rgido.

Modo de animao: Seleciona o modo de animao utilizado. Pode ser modificado

Figura 13 rea de trabalho com um novo documento criado.

2.2 Ferramentas caneta e forma

Figura 14 Boto Caneta e Forma e o menu de seleo da funo.

2.2.1 Adicionando uma forma

Figura 15 Ferramenta Linha selecionada e trs formas na rea de trabalho.

Figura 16 Painel opes exibindo as opes de criao de retngulos.

Oval: restringe a um crculo;

Retngulo: restringe a um quadrado;

Linha: restringe os ngulos a incrementos de 45.

2.2.2 Desenhando com a ferramenta caneta

2.2.2.1 Desenhando linhas retas com a ferramenta caneta

Clique na ferramenta "Forma" na barra de ferramentas.

Selecione a opo "Caneta" no menu pop-up.

Clique novamente no ponto onde voc deseja que o segmento termine.

2.2.2.2 Desenhando linhas curvas com a Ferramenta Caneta

2.2.2.3 Desenhando formas fechadas com a Ferramenta Caneta

Figura 19 Ao final do desenho, para fechar a forma, d o ltimo clique no primeiro n.

2.2.2.4 Adicionando e removendo pontos de fixao

seguida clique no caminho para adicionar outro ponto de fixao.