Caderno de INFO(Multimídia 2015.2

8/17/2019 Caderno de INFO(Multimídia 2015.2

http://slidepdf.com/reader/full/caderno-de-infomultimidia-20152 1/67

Multimídia

Ewerton Menezes de Mendonça

Curso Técnico em Informática

Educação a Distância2015





EXPEDIENTE

Professor AutorEwerton Menezes de Mendonça

Design InstrucionalDeyvid Souza Nascimento

Maria de Fátima Duarte AngeirasRenata Marques de Otero

Terezinha Mônica Sinício Beltrão

Revisão de Língua PortuguesaLetícia Garcia

DiagramaçãoIzabela Cavalcanti

CoordenaçãoJoão Ferreira

Coordenação ExecutivaGeorge Bento Catunda

Coordenação GeralPaulo Fernando de Vasconcelos Dutra

Conteúdo produzido para os Cursos Técnicos da Secretaria Executiva de Educação

Profissional de Pernambuco, em convênio com o Ministério da Educação(Rede e-Tec Brasil).

Agosto, 2015



M539mMendonça, Ewerton Menezes de.

Multimídia : Curso Técnico em Informática : Educação adistância / Ewerton Menezes de Mendonça. – Recife: SecretariaExecutiva de Educação Profissional de Pernambuco, 2015.

66 p.: il.

Inclui referências bibliográficas.

1. Educação a distância. 2. Computação. 3. Multimídia. 4.Aplicativos gráficos. I. Mendonça, Ewerton Menezes de. II. Título.III. Secretaria Executiva de Educação Profissional de Pernambuco.IV. Ministério da Educação. V. Rede e-Tec Brasil.

CDD – 004CDU – 681.3



5

Sumário

Introdução .............................................................................................................................................. 8

1.Competência 01 | Conhecer os Princípios de Multimídia para a Web ............................................. 10

1.1 Multimídia ................................................................................................................................................ 10

1.2 Breve histórico ......................................................................................................................................... 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 Painéis ................................................................................................................................................... 20

2.Competência 02 | Desenvolver Elementos Multimídia 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 fixação ................................................................................... 27

2.3 Utilizando imagens e vídeo ...................................................................................................................... 28

2.3.1 Importar imagens ou vídeos ................................................................................................................. 28

2.3.2 Adicionar imagens ou vídeos arrastando do seu computador ............................................................. 29

2.3.3 Adicionar imagens e vídeos arrastando-os a partir da Biblioteca de recursos ..................................... 30

2.3.4 Imagens SVG ......................................................................................................................................... 30



6

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

2.5 Ferramenta Tag ........................................................................................................................................ 31

2.6 Trabalhando com posição, tamanho e outras propriedades dos elementos .......................................... 33

2.6.1 Para mover um ou mais objetos no cenário ......................................................................................... 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.Competência 03 | Desenvolver Animações Multimídia para Interface ............................................ 42

3.1 Animação pelo Modo Rápido ................................................................................................................... 42

3.1.2 Animando pelo Modo Rápido ............................................................................................................... 43

3.1.3 Reproduzindo uma Animação ............................................................................................................... 44

3.1.4 Alterando as transições entre as cenas ................................................................................................ 44

3.2 Animação pelo Modo Avançado .............................................................................................................. 45

3.3 Criando uma animação no Modo Avançado ............................................................................................ 46

3.3.1 Animações em Loop .............................................................................................................................. 47

3.3.2 Fluxo de Animação ................................................................................................................................ 48

3.3.3 Animações Aninhadas ........................................................................................................................... 49

4.Competência 04 | Manipulando a Timeline com Labels (Marcadores) ............................................ 51

4.1 Criando um Evento ................................................................................................................................... 51



7

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

4.3 Adicionar Rótulos à Linha do Tempo ....................................................................................................... 56

5.Competência 05 | Conhecer Técnicas de Edição e Montagem de Vídeo para Web ........................ 58

5.1 Componente Áudio .................................................................................................................................. 58

5.2 Componente Vídeo .................................................................................................................................. 60

5.3 Componente Galeria Carrossel ................................................................................................................ 61

5.4 Publicando seu Trabalho .......................................................................................................................... 63

Conclusão ............................................................................................................................................. 64

Referências ........................................................................................................................................... 65

Minicurrículo do Professor ................................................................................................................... 66



8

Introdução

Caro (a) aluno (a), este caderno é a principal fonte de conhecimento para o curso. Nele você

encontrará as informações necessárias para seu aprendizado. No entanto, ele não é a única fonte. A

internet é rica em conteúdo e poderá fornecer mais conhecimento. O AVA (Ambiente Virtual de

Aprendizagem) também possui ferramentas para lhe ajudar no desenvolvimento das atividades,

como o fórum.

Mesmo com todas essas fontes, a responsabilidade maior para aprender é do aluno. O aprendizado

é construído mais efetivamente com o uso do conhecimento exposto. É durante a produção das

atividades e até na reprodução dos exemplos que o entendimento é testado e dúvidas surgem. Por

vezes, será necessário reler alguns pontos deste caderno, ou fazer uma consulta por mais

informações na internet, ou colocar a dúvida no fórum. Tudo isto faz parte da metodologia adotada

por esta forma de aprendizado. Assim, é imprescindível que você sempre refaça os exemplos dados

e os exercícios sugeridos. Copiar trabalhos apenas irá atrapalhar seu aprendizado. Se você não

entendeu na primeira vez, continue tentando até compreender.

Esta disciplina é focada no desenvolvimento de criação multimídia. Para isto utilizamos o programa

Google Web Design, que, apesar de relativamente novo, é uma poderosa ferramenta no

desenvolvimento de conteúdo multimídia para a internet.

O caderno está dividido em cinco competências. Na primeira competência iremos Conhecer osprincípios de multimídia para a web, o que é multimídia, quais as tecnologias que existiram até

agora, qual o programa que iremos utilizar para criar conteúdo multimídia e como é sua interface.

Na segunda competência iremos Desenvolver elementos multimídia para interfaces, veremos

como criar os diversos elementos necessários para compor uma animação, como ilustrações,

imagens, texto, áudio, vídeo, etc. Na terceira competência iremos Desenvolver animações para uso

em interfaces. Na quarta competência iremos Manipular a linha do tempo. Na última competência

iremos Conhecer técnicas de edição e montagem de vídeo para a web.



9

Seu desempenho depende de quanto tempo você vai dedicar ao curso. Não só assistindo às aulas elendo o caderno, mas, principalmente, pelas horas de prática que você investe para o aprendizado.

Lembre-se de que quanto mais, melhor.

Bons estudos.



10

1.Competência 01 | Conhecer os Princípios de Multimídia para a Web

Iniciamos nossa disciplina conhecendo os conceitos fundamentais sobre multimídia destinado para

páginas web. Mas não paramos por aí. Vamos mais além e teremos o primeiro contato com o

Google Web Design.

Iremos começar conhecendo uma definição para multimídia que irá nos guiar durante a disciplina,

depois passaremos por um breve histórico para conhecer melhor a área. Essa parte é importante

para um bom entendimento profissional. Conheceremos, então, a tecnologia que provavelmente

estará por mais tempo no futuro na criação de elementos multimídia 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 rápida a criação de conteúdo multimídia.

Ficou curioso? Então não percamos mais tempo. Continue a ler e bom aprendizado.

1.1 Multimídia

Segundo Chapman & Chapman 2000 e Fluckiger (1995), multimídia é a combinação, controlada por

computador, de pelo menos um tipo de média estática, que pode ser texto, fotografia, gráfico, com

pelo menos um tipo de mídia dinâmica, como vídeo, áudio, animação.

No começo da web a exibição das informações em sites web utilizava de mídia estática para

alcançar a transmissão de informação. Com a popularização da internet, chamar a atenção do

usuário e facilitar a compreensão da mensagem que era transmitida tornou-se mais relevante.

Assim, meios de utilizar som, animação e vídeos começaram a ser desenvolvidos.

Dessa forma, a transmissão e a recuperação por mais de um meio sensorial de uma informação - ou

seja, mais de um sentido humano - estão envolvidas no processo e são vistas como mensagens

Competência 01



11

multimídia. O termo ficou mais conhecido no meio computacional quando o som e o vídeo

passaram a fazer parte da dia a dia dos usuários.

1.2 Breve histórico

Esqueça quase tudo que você conhece hoje sobre internet, deixando apenas texto e imagem, talvez

um ou outro gif animado horrível e um arquivo de música eletrônica como nos vídeo games antigos.

Este é o cenário multimídia nos anos 90.

Na busca por melhores qualidades multimídia, a Microsoft libera o DHTML, uma linguagem de

marcação que acrescenta o ‘D’ de dinâmico. Assim, elementos HTML, utilizando o JavaScript,

poderiam correr pelo tempo e espaço do navegador. Mas só funcionava no Internet Explorer. No

entanto, ele não era o único navegador e, naquela época, se você utilizasse o DHTML tinha que ter a

garantia do usuário usar o IE.

Outras empresas entraram na briga com outra estratégia. Ao invés de construir um navegador do

zero, construíram plug-ins. Plug-ins são pequenos aplicativos que ampliam a capacidade do

programa nativo. Assim, teríamos 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 opção 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 próxima versão. Os sites multimídia

cresceram vertiginosamente e artistas faziam seus milagres com a tecnologia.

Por muito tempo o plug-in Flash foi a solução para todos os problemas e os designers viveram um

mar de rosas. No entanto, rosas possuem espinhos e a tecnologia Flash não 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

Competência 01



12

estava com os olhos pregados no conteúdo Flash, incluindo os anúncios nos sites, isto incomodou

outras empresas.

As discussões em torno de para onde a web estava indo voltou os olhos para o conteúdo multimídia

e uma nova estruturação da tecnologia HTML. A nova versão do HTML deveria contemplar o

conteúdo multimídia. E, depois de muita discussão, de idas e vindas, é lançado o HTML 5 com a

promessa de substituir o Flash.

Nesta época temos o início da era mobile. Celulares se transformaram em computadores com

sistemas operacionais e operadoras disponibilizaram serviços de internet cada vez melhores.

Evoluímos! Mas o conteúdo Flash não era exibido nos iPhones. Em declaração à imprensa, o CEO da

Apple, Steve Jobs, declara que não aceitará o Flash em seu sistema mobile por motivos de

segurança e desempenho. Ao mesmo tempo o conteúdo Flash inchou e precisou de mais recursos,

diminuindo seu desempenho. O Flash exigia demais dos computadores e era completamente

inviável para o ambiente mobile. O HTML 5 era a opção mais sustentável. Um padrão aberto,

ninguém era dono, e, ao mesmo tempo, também era livre de plug-in. O navegador era quem fazia

todo o trabalho. Para pôr uma pedra no assunto a Google bloqueou o conteúdo Flash em seu

navegador Chrome, seguido pelo Mozilla Firefox.

Até a própria Adobe não 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 padrão aberto e livre. A cada mês o HTML 5 cresce e melhora para

alcançar mais necessidades dos criadores multimídia. O futuro promete.

1.3 Tecnologia HTML 5

Como você viu no subcapítulo anterior a tendência é que o Flash seja substituído pelo HTML 5. Há

várias empresas engajadas nisto. Mas o que é o HTML 5?

Diferente do Flash, que possui um plug-in proprietário que precisa ser baixado e instalado no

Competência 01



13

navegador, o HTML 5 é todo processado no próprio navegador. É responsabilidade do navegador

executar corretamente os arquivos do HTML 5. Assim, cada desenvolvedor dos navegadores atuaisimplantam seu código seguindo o padrão, e isto é o melhor do HTML 5, ele é um padrão livre.

Ninguém precisa pagar para segui-lo.

Na verdade o HTML 5 é um nome comercial. Ele é junção de três linguagem: o HTML, o CSS e o

JavaScript. O HTML contextualiza o elemento, ele diz que aquilo é aquilo e não aquilo outro, ele

também define uma hierarquia para os elementos. O CSS define as configurações de exibição do

elemento, como sua posição, cores, tamanho, etc. Já o JavaScript é uma linguagem de programação

onde podemos definir eventos e comportamentos para os elementos, além de dar movimento, e

movimento é animação.

Quer ver o que é possível fazer com HTML 5? Acesse o endereço abaixo. É um clip multimídiatotalmente produzido com a tecnologia.

www.thewildernessdowntown.com/

Mas você deve estar se perguntando, “eu preciso aprender tudo isso para fazer um conteúdo

multimídia?”. Bem, precisar, não precisa, mas você será um profissional bem melhor se conhecer.

Poderá mais e melhor, conhecendo bem os padrões. No entanto, utilizaremos uma IDE, que é um

Integrated Development Environment, ou em bom português, ambiente integrado de

desenvolvimento, que fará o trabalho pesado de codificação para nós. O que seria uma IDE?

Veremos isto no próximo tópico.

1.4 Google web designer

Você pode fazer qualquer conteúdo multimídia utilizando apenas um editor de texto simples como

o Bloco de Notas do Windows e conhecendo os padrões web: HTML, CSS e JavaScript. Mas algumas

cenas são tão complexas que certamente precisamos de ajuda. Na verdade uma grande ajuda. Com

isso, temos os programas que fazem este serviço e os chamamos de IDE, sigla em inglês para

Ambiente de Desenvolvimento Integrado.

Competência 01



14

O HTML 5 é novo mas já possui algumas IDEs disponíveis. Até a própria Adobe possui o Adobe Edge

Animate. Mas a gigante Google disponibilizou um aplicativo que faz o mesmo serviçogratuitamente, o Google Web Designer.

Além de ajudar a construir a programação necessária para os elementos dinâmicos, o Google Web

Designer possui ferramentas para ilustração, desenvolvimento 3D e uma biblioteca que o ajuda a

integrar o site com serviços da Google.

Google Web Designerwww.google.com/webdesigner

A ferramenta ainda está no início de desenvolvimento e promete crescer, oferecendo novos

recursos a cada versão, mas já está estável o suficiente para fazer anúncios e até sites multimídia.

Figura 1 – Marca do Google Web DesignerFonte: próprio 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 limitações. Mas sua gratuidade, apesar de não ser de código aberto, nos

dá vantagens em relação a outras opções. 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 produção, apenas vai dar mais trabalho.

Competência 01



15

Figura 2 – Interface do Google Web DesignFonte: próprio autor.

O GWD está na versão 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 instalação no sistema operacional Windows é igual a qualquer aplicativo desse sistema.

Sem complicação.

Neste subcapítulo apresentamos a interface do GWD. Observe a Figura 2, ele parece ser um

programa complicado, mas não é. Primeiro você deve conhecer cada parte dele para saber onde

fica aquilo que você precisa para construir o conteúdo multimídia.

Quando iniciamos o GWD nos são apresentadas as opções 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.

Competência 01



16

Figura 3 – Abertura do GWD, opções de ‘Criar novo arquivo’. Fonte: próprio autor.

O conteúdo multimídia pode ser utilizado para construir desde sites e anúncios, entre outros

artefatos digitais, tudo utilizando HTML 5. A Google construiu o GWD com ferramentas direcionadas

para a criação de anúncios para a rede de anúncios AddWords e possui modelos prontos para isto, e

para o DoubleClick também, Figura 4. Temos modelos de anúncios direcionados para celulares e

web sites de vários tipos. Você ainda pode criar modelos próprios e eles são exibidos em ‘Meus

Modelos’. O gerenciador ainda pode filtrar os modelos baseados no que você digitar na caixa de

texto ‘Filtrar por:’.

Alguns modelos são de propagandas intersticiais, uma peça publicitária que toma toda a tela ou

fica no formato de uma janela que surge inesperadamente na frente de uma página web em umsite.

Competência 01



17

Figura 4 – Gerenciador de modelos do GWD.Fonte: próprio autor.

Mas nem só de anúncios vive a ferramenta. Da mesma forma em que criamos um banner, podemos

criar um web site inteiro, bastando aumentar seu tamanho. Escolhendo a opção ‘Novo arquivo’

podemos fazer o que quisermos. Selecionando esta opção teremos a tela da Figura 5.

Figura 5 – Área de trabalho do GWD.Fonte: próprio autor.

Competência 01



18

O GWD tem uma área central destinada à construção dos projetos e a edição de códigos. Esta área

é cercada por uma barra de ferramentas, uma barra de opções da ferramenta, uma linha do tempoe um conjunto de painéis que permitem realizar diversas ações, como modificar elementos,

adicionar componentes e adicionar eventos. Observe a localização delas na Figura 6.

Figura 6 – 1. Painel de ferramentas; 2. Painel de opções da ferramenta; 3. Linha do tempo;4. Cor, Propriedades,Componentes, Eventos, CSS e painéis da Biblioteca de recursos.Fonte: próprio autor.

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

Código. No modo Design o espaço de trabalho exibe suas imagens, texto e outros elementos visuais,

exibindo-os da forma como serão vistos em um navegador. No modo Código a área mostra o código

em HTML/CSS necessário para se construir o que está na visualização.

A barra de visualização permite escolher entre os modos "Design" e "Código", visualizar o HTML,

publicar seu anúncio e alterar o nível de zoom na página em que você estiver trabalhando.

Figura 7 – Barra de visualização.Fonte: próprio autor.

Competência 01



19

1.5.2 Barra de ferramentas

A barra de ferramentas agrupa ferramentas para a criação e manipulação 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 descrições.Fonte: https://support.google.com/webdesigner/answer/3187129?hl=pt-BR&ref_topic=3249465&vid=1-635790704379186261-2157043334

Competência 01

https://support.google.com/webdesigner/answer/3187129?hl=pt-BR&ref_topic=3249465&vid=1-63579




20

1.5.3 Linha do tempo

Animações nada mais são do que a variação de atributos dos elementos ao longo do tempo. A linha

do tempo exibe as mudanças nos elementos de acordo com o tempo. O tempo da mudança do

elemento é marcado em um frame-chave.

A Linha do tempo possui dois modos de exibição: o modo Rápido e o modo Avançado. No modo

Rápido são exibidas as miniaturas dos momentos onde o cenário muda. No modo Avançado são

exibidos os momentos onde os frames-chaves sofrem alterações.

Figura 9 – Exibição da linha do tempo no modo rápido e no modo avançado. Apenas um dos modos é visto de cadavez.Fonte: https://support.google.com/webdesigner/answer/3187129?hl=pt-BR&ref_topic=3249465&vid=1-635790704379186261-2157043334

1.5.4 Painéis

A seção de painéis da interface contém os painéis Cor, Propriedades, Componentes, Eventos, CSS e

Biblioteca de recursos. Os painéis podem ser minimizados ou arrastados para uma posição diferente

na seção de painéis.

Competência 01





21

Figura 10 – Sessão painéis. Na figura está sendo exibido o painel Cor enquanto

os outros estão ocultos.Fonte: próprio autor.

Competência 01



22

2.Competência 02 | Desenvolver Elementos Multimídia para Interfaces

Olá! Nesta competência vamos ver como criar e transformar elementos que formarão nosso

conteúdo multimídia através do GWD.

O GWD foi desenvolvido para a criação de anúncios, mas nada impede de se fazer um site animado

com ele. Depois de criado, o anúncio pode ser inserido em qualquer página através da tag <iframe>

no HTML.

2.1 Criando um novo documento

No menu ‘Arquivo’ selecione ‘Novo arquivo’, Figura 11.

Figura 11 – Menu arquivo.Fonte: próprio autor.

Isso abre a caixa de diálogo "Novo arquivo em branco". No lado esquerdo temos opções para

anúncios, que serão inseridos em uma página, e outros tipos de documento. A opção HTML cria

uma página padrão, sem limites. A opção HTML com páginas cria uma página HTML que possui

áreas que o GWD também chama de páginas. Assim, na opção Banner o conteúdo está apenas em

uma página; a opção Expansível possui duas páginas, uma visível e outra que aparece quando a

Competência 02



23

outra página é clicada; a opção Intersticial possui várias páginas que são exibidas quando algum

elemento é clicado. A diferença é que as páginas de um anúncio do GWD estão todas em umapágina HTML. Então, para o GWD páginas não correspondem a outro arquivo HTML.

Selecione as opções da Figura 12.

Figura 12 – Caixa de diálogo ‘Criar novo arquivo em branco’.

Fonte: próprio autor.

Ambiente: seleciona o padrão para uso dos planos de anúncio já configurados. Se você não

utilizar nenhum plano, selecione ‘Anúncio que não é do Google’.

Dimensões: são tamanhos padrões para anúncios. Em Personalizado você pode dizer nos

campos ao lado a largura e altura do conteúdo multimídia que você criará.

Nome: será o identificador do anúncio nos sistemas de anúncio disponíveis e o nome do

arquivo inicial.

Local: onde os arquivos do projeto serão armazenados no disco rígido.

Modo de animação: Seleciona o modo de animação utilizado. Pode ser modificado

posteriormente.

Competência 02



24

Outra forma seria utilizar um modelo. O GWD disponibiliza vários modelos prontos.

Quando terminar clique no botão ‘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 são 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 não podem ser alteradas usando a animação da linha do tempo. A

tag que abrange a tela pode ter uma animação (para mover toda a tag), mas a cor ou forma da

imagem na tela não pode ser animada. Observe na Figura 14 onde fica o botão Forma que abre o

menu para seleção da função.

Competência 02



25

Figura 14 – Botão Caneta e Forma e o menu de seleção da função.Fonte: próprio autor.

2.2.1 Adicionando uma forma

A ferramenta de forma permite desenhar formas geométricas básicas, como formas ovais,

retângulos e linhas, na área de trabalho.

Para criar um desenho em forma de linha, retângulo ou oval, clique na ferramenta "Forma" no

painel de ferramentas, selecione a forma no menu pop-up e arraste a forma no cenário para o

tamanho desejado. Observe na Figura 15.

Figura 15 – Ferramenta Linha selecionada e três formas na área de trabalho.Fonte: próprio autor.

Na barra de opções da ferramenta, é possível ainda definir atributos de traço e cor, o raio do canto

dos retângulos 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 Retângulo selecionada a barra de opções muda e apresenta opções como acor do traço, preenchimento, tamanho do traço e cantos arredondados.

Figura 16 – Painel opções exibindo as opções de criação de retângulos.Fonte: próprio autor.

Competência 02



26

Arraste com a ferramenta de forma enquanto pressiona a tecla Shift para restringir o desenho:

Oval: restringe a um círculo;

Retângulo: 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 fixação que sãoconectados por linhas retas ou curvas. Também é possível criar caminhos fechados para gerar

formas mais complexas. Junto com a ferramenta de forma, a ferramenta Caneta cria o conteúdo

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 opção "Caneta" no menu pop-up.

3. Clique no ponto do cenário 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 fixação para segmentos retos adicionais. O ponto

de fixação ativo parece maior, indicando que está selecionado. Os pontos de ancoragem anteriores

são desmarcados à medida que você adiciona novos pontos.

Figura 17 – Seleção e utilização da Ferramenta Caneta para construir retas. O quadrado verde maior na forma é oponto de ancoragem ativo.Fonte: próprio autor.

Competência 02



27

2.2.2.2 Desenhando linhas curvas com a Ferramenta Caneta

Você desenha uma curva criando e arrastando pontos de fixação para gerar alavancas de controle

que definem a forma da curva. O comprimento e direção das alavancas de controle determinam o

grau de curvatura.

Figura 18 – Seleção e utilização da Ferramenta Caneta para construir curvas. Cada ponto de ancoragem possui doispontos de controle quando são curvas, que determinam a curvatura da linha.Fonte: próprio autor.

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, faça o último clique sobre

o ponto de fixação inicial.

Figura 19 – Ao final do desenho, para fechar a forma, dê o último clique no primeiro nó.Fonte: próprio autor.

2.2.2.4 Adicionando e removendo pontos de fixação

Você pode adicionar ou remover pontos de fixação em seus caminhos usando as opções da

ferramenta Caneta na barra de opções.

Para adicionar pontos ao caminho, selecione a opção de Adicionar Ponto na barra de opções e em

Competência 02



28

seguida clique no caminho para adicionar outro ponto de fixação.

Para remover pontos do caminho, selecione o cursor de Remover Ponto na barra de opções e, em

seguida, clique no ponto que você deseja remover. O caminho mudará para se ajustar aos pontos

restantes.

Figura 20 – Destacadas estão as opções de adicionar nó ao caminho e remover nó.Fonte: próprio autor.

Com estas ferramentas você pode criar as formas de que precisa para fazer os desenhos de seu

conteúdo multimídia.

2.3 Utilizando imagens e vídeo

O GWD permite que você adicione recursos de imagem e vídeo de diversas formas. Ele sempre fará

uma cópia da imagem ou vídeo 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 avídeos nos formatos .ogg, .mp4 e .webm.

2.3.1 Importar imagens ou vídeos

A partir do menu "Arquivo", selecione "Importar recursos…". Selecione o arquivo ou os arquiv os

que você deseja importar usando a caixa de diálogo. Os recursos aparecerão na área de trabalho e

na Biblioteca de recursos.

Competência 02



29

Figura 21 – Menu ‘Arquivo’, opção ‘Import recursos...’ Fonte: próprio autor.

2.3.2 Adicionar imagens ou vídeos arrastando do seu computador

Selecione a imagem ou o vídeo que você deseja usar com o sistema de arquivos do computador.

Arraste a imagem ou o vídeo para a área de trabalho.

Figura 22 – Arrastando um arquivo de imagem para o GWD.Fonte: próprio autor.

É possível arrastar vários recursos dessa forma. Após adicioná-los, os tamanhos desses recursos

serão mantidos.

Competência 02



30

2.3.3 Adicionar imagens e vídeos arrastando-os a partir da Biblioteca de recursos

Na Biblioteca de recursos, selecione os recursos da imagem ou do vídeo 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.Fonte: próprio autor.

2.3.4 Imagens SVG

Imagens SVG são vetoriais. São criadas por programas de edição vetorial como Corel Draw, Adobe

Illustrator e o gratuito Inkscape. É possível usar o Google Web Designer para fazer tipos específicos

de edições em imagens SVG importadas. Além disso, as propriedades de preenchimento de formas

podem ser alteradas, como cor e transparência, assim como as propriedades de traço, como cor,espessura, junções e linhas tracejadas.

Para fazer a edição de uma imagem SVG, após a importação de um arquivo SVG, é possível editar

esse arquivo da mesma forma que um grupo. Para editar a imagem, clique duas vezes nela de

maneira a entrar no modo de edição. Cada elemento poderá ser selecionado separadamente.

Utilize o painel "Estilo" do painel de propriedades para efetuar as mudanças.

Competência 02



31

2.4 Ferramenta Texto

A ferramenta Texto permite que você crie áreas de texto no anúncio ou na página HTML. Além

disso, você modifica seu texto com as ferramentas de edição já conhecidas, alterando fontes,

tamanhos, formatação, layout e tipo de elemento HTML. As opções na barra de opções são bem

intuitivas e seus ícones muito semelhantes a qualquer processador de texto. A única diferença é a

primeira opção porque o GWD coloca o texto dento de uma tag <div> por padrão.

Figura 24 – Adicionando um texto com a Ferramenta Texto. Observe na barra de opções as configurações possíveispara texto.Fonte: próprio autor.

2.5 Ferramenta Tag

O HTML é composto por tags que dizem o tipo e a hierarquia da informação. 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. Aferramenta tag permite que você clique e arraste para posicionar a tag onde desejar. A ferramenta

tag tem como padrão 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 opções 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;

Competência 02



32

Para escolher uma tag de vídeo, clique no ícone de elemento de vídeo;

Para escolher outras tags, clique no ícone de tag personalizada e digite o nome do elementoque 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 dimensões da área da div.

Por vezes você pode precisar colocar uma tag dentro da outra, hierarquizando o conteúdo. Para isto

crie uma tag que você quer executar como tag principal, assim como uma tag div. Escolha a

ferramenta Seleção no painel de ferramentas. Clique duas vezes na tag principal desejada. A tag

principal terá, então, um contorno vermelho, e deixará de ser selecionável. Crie uma nova tag

clicando no botão ‘Ferramenta Tag’ na barra de ferramentas. Observe que o botão 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 nível de página, clique duas vezes no cenário. Use a localização atual acima da linhado tempo para passar a um nível específico de vários divs aninhados. Observe na Figura 25 a

localização de níveis destacada com um retângulo 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 – Criação de tags e destaque do localizador de níveis. Na Figuratemos uma <div> dentro de outra.Fonte: próprio autor.

Competência 02



33

2.6 Trabalhando com posição, tamanho e outras propriedades dos elementos

A ferramenta Seleção 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 cenário

Clique na ferramenta de seleção na barra de ferramentas. Selecione um objeto clicando nele ou

desenhando uma marca de seleção em torno dele. Como opção, clique em outro objeto enquanto

pressiona a tecla "Shift" para adicioná-lo à seleção. Clique e arraste os objetos selecionados.

Como opção 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 seleção 10 pixels.

2.6.2 Para girar um objeto

No painel de ferramentas, clique na ferramenta de seleção. Verifique se a caixa de seleção Controle

de transformação está marcada no painel de opções da ferramenta. Selecione o objeto ou os

objetos. O controle de rotação (dois anéis aninhados) aparecerá no meio da seleção.

Alternativamente, mude o centro de rotação arrastando o controle de rotação a partir do anel

interno. Gire a seleção arrastando o anel externo do controle de rotação.

Como opção, segure a tecla Shift ao arrastar para limitar a rotação acréscimos de 45°.

2.6.3 Para redimensionar um objeto

No painel de ferramentas, clique na ferramenta de seleção. Verifique se a caixa de seleção Controle

de transformação está marcada no painel de opções da ferramenta. Selecione o objeto ou os

objetos. Os elementos selecionados serão marcados por uma caixa delimitadora azul. Arraste umdos pontos de controle nos lados ou cantos da caixa delimitadora. Como alternativa, segure a tecla

Competência 02



34

Shift ao arrastar para manter a proporção original da seleção.

Figura 26 – Utilizando a ferramenta Seleção para modificar as propriedades do objeto. Emdestaque a ferramenta de seleção (seta) e o controle de transformação. Os controles sóaparecem se ele estiver marcado. O círculo maior no meio do retângulo é o controle derotação.


2.6.4 Alinhar e distribuir objetos

Você também pode alinhar e distribuir vários objetos no cenário usando os controles opcionais no

painel de opções da ferramenta.

Figura 27 – Em destaque as ferramentas de alinhamento e distribuição de objetos.Fonte: próprio autor.

2.6.5 Organizando as camadas

Cada elemento no Google Web Designer está, em seu próprio nível, em uma pilha de todos os

Competência 02



35

elementos, Figura 28. Os elementos mais próximos da parte superior da pilha cobrem os elementos

abaixo. Para alterar a camada de cada elemento, você pode selecionar o elemento com aferramenta de seleção e usar os seguintes botões de camadas que estão ao lado dos botões de

alinhamento e distribuição.

Figura 28 – Tabela com a descrição de cada botão de camada.Fonte: https://support.google.com/webdesigner/answer/3241090?hl=pt-BR&ref_topic=6281626&vid=1-635790704379186261-2157043334.

Figura 29 – Exibição 3D de uma página web com os níveis de cada elemento.Fonte: https://reader015.{domain}/reader015/html5/0718/5b4e81ae5980c/5b4e81c2e8885.png.

Competência 02

https://support.google.com/webdesigner/answer/3241090?hl=pt-BR&ref_topic=6281626

https://support.google.com/webdesigner/answer/3241090?hl=pt-BR&ref_topic=6281626



36

2.7 Aplicando cores a elementos

É possível ajustar o traço e a cor de preenchimento de elementos SVG, HTML e de tela usando as

ferramentas de cor. Ela exibe três opções: Ferramenta Preencher, Ferramenta Traço e Ferramenta

Gradiente.

Figura 30 – Ferramenta de cor selecionada e suas opções à amostra.Fonte: próprio autor.

2.7.1 Misturador de cores

O misturador de cores aparece quando você clica no ícone de seleção de cor, Figura 31. Para

selecionar uma cor, clique na barra de cores e no misturador para selecionar o matiz ou atonalidade desejados. Use o campo Alfa para alterar a transparência 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 traço é o mesmo. Você deve apenas selecionar a ferramenta Preenchimento

de Traço, Figura 32.

Competência 02



37

Figura 31 – A cor selecionada aparece na barra de opções.Fonte: próprio autor.

Figura 32 – Para modificar o Traço ou a Borda você deve selecionar o Estilo também.Fonte: próprio autor.

2.7.2 Gradientes

Um gradiente é um preenchimento de várias 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 noelemento para mudar seu preenchimento.

Competência 02



38

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 não são compatíveis com o

gradiente de borda. Então, evite-os.

Figura 33 – Misturador de canais com a opção de ferramenta gradiente linear em destaque.Fonte: próprio autor.

2.7.3 Ajustando o gradiente

Após a aplicação 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á três

manipuladores de controle vermelhos no controle do gradiente, dois para redimensionamento e

um para rotação do gradiente, Figura 34 e 35.

Competência 02



39

Figura 34 – Ferramenta Gradiente destacada e os controladores ajustados de um gradientelinear.Fonte: próprio autor.

Figura 35 – Controladores de um gradiente radial. Em destaque está a opção para ajuste daborda ou preenchimento.Fonte: próprio autor.

Clicando duas vezes no controlador central do preenchimento ele volta para o centro do elemento.

2.8 Ferramenta 3D

O GWD pode fazer animações com elementos em 3D. Este tipo de animação é 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 atrás.

Competência 02



40

Para reorientar a visualização em 3D do seu projeto, clique na ferramenta Girar cenário 3D e, em

seguida, use o mouse para mudar seu ponto de vista. Você pode girar livremente o objeto clicandoe arrastando em qualquer lugar, exceto nas alavancas de rotação 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 visualização do cenário seja girada ao redor do eixo x global.

A mudança de ponto de vista só é usada para visualizar o layout em 3D, ou seja, ela não afeta

trabalhos visualizados ou publicados. Elas servem apenas para lhe ajudar a localizar os elementos

nos três eixos.

Selecione Visualização frontal, Visualização superior ou Visualização lateral no menu "Visualização"

para ver o cenário diretamente a partir dos eixos x, y ou z. Clique duas vezes na ferramenta "Girar

cenário 3D" para retornar à visualização selecionada.

Figura 36 – Em destaque a ferramenta Alternar Cenário 3D.Fonte: próprio autor.

2.9 Rotacionando um objeto 3D

Para alterar a rotação de um objeto em três dimensões, selecione o elemento desejado, clique na

ferramenta Alternar Objeto 3D e, em seguida, use o mouse para mudar a rotação.

Competência 02



41

Você pode girar livremente o objeto clicando e arrastando em qualquer lugar, exceto nas alavancas

de rotação codificadas por cores. No entanto, você tem mais controle quando gira um eixo por vezem um objeto. Por exemplo, arrastar o anel vermelho fará com que o objeto gire em torno do eixo x

global.

Também é possível alterar o ponto de rotação clicando e arrastando o anel interno do controle.

Você também pode segurar a tecla Shift enquanto o arrasta para restringir a rotação a acréscimos

de 45°.

Figura 37 – Em destaque a ferramenta Alternar Objeto 3D.Abaixo (seta) no painel de animação veja como será mostrado o objeto pelo ponto devisão do usuário.Fonte: próprio autor.

Com isto encerramos esta competência. Nas próximas, agora com os elementos criados, vamos

animá-los.

Competência 02



42

3.Competência 03 | Desenvolver Animações Multimídia para Interface

Nesta competência vamos aprender como animar os elementos criados na competência anterior.

Teremos vários conceitos importantes que precisam de muita atenção e dedicação na prática para

melhor entendimento. Esta parte é mais complicada, talvez seja necessário ler o caderno mais de

uma vez para melhor compreensão.

A primeira coisa é que o GWD possui dois modos de animação. Um mais simples, que não te dá

muita liberdade, e um mais avançado, que exige um conhecimento maior. Para uma animação mais

complexa utilize o modo avançado, para isto clique no ícone "Modo avançado", Figura 38, para

alternar para o Modo avançado.

Figura 38 – Linha do tempo no modo rápido. Em destaque o botão para alternar para omodo avançado.Fonte: próprio autor.

Então? Vamos começar?

3.1 Animação pelo Modo Rápido

No Modo Rápido, você cria sua animação cena a cena. Você adiciona uma nova visualização de toda

Competência 03



43

a página, muda os elementos que deseja animar e, como opção, modifica os tempos e a fluidez da

transição. No modo Rápido, uma animação começa em uma cena e termina na próxima. Nestemodo não tem como animar individualmente os elementos. Como dito, a animação é feita cena a

cena.

3.1.2 Animando pelo Modo Rápido

Para animar utilizando o Modo Rápido, primeiro organize todos os elementos do anúncio,

posicionando onde você quer que eles estejam quando a animação começar. Clique então no botão‘Adicionar cena’, Figura 39. Altere os elementos que você deseja animar. Essa alteração pode incluir

o movimento e a rotação dos elementos, mudando a cor, o tamanho ou qualquer outro parâmetro.

Vá adicionando cenas e modificando os elementos até terminar.

Ao lado do botão de ‘Adicionar cena’ temos outro botão com um ícone de lixeira, que serve para

excluir a última cena.

Figura 39 – Na figura temos duas cenas em uma página. Em destaque o botão para incluiruma nova cena.Fonte: próprio autor.

Competência 03



44

3.1.3 Reproduzindo uma Animação

À medida que você cria suas animações, clique no botão "Reproduzir", Figura 40, na parte superior

da linha do tempo da animação para ver como elas serão exibidas. O botão será substituído por um

quadrado vermelho. Clique nele para parar.

Para repetir a reprodução, clique no botão "Loop" ao lado do botão "Reproduzir" e inicie a

reprodução.

A reprodução da animação só serve para você visualizá-la. Ou seja, não é possível fazer edições ou

alterações nos arquivos enquanto as animações são reproduzidas, e o trabalho visualizado ou

publicado não sofre modificações.

Figura 40 – Em destaque o botão Visualizar animação.Fonte: próprio autor.

3.1.4 Alterando as transições entre as cenas

Clique no ícone ‘Transição’ entre as cenas, Figura 41. Aparecerá um display com a configuração da

transição. Nela você pode modificar o tempo da transição e o fluxo da animação, conhecido no

ramo da animação como easing.

Competência 03



45

Figura 41 – Em destaque as configurações para uma transição. Entre as cenas fica o botão detransição.Fonte: próprio autor.

3.2 Animação pelo Modo Avançado

No modo Avançado, cada elemento tem uma camada individual na linha do tempo da animação.

Dessa forma, é possível 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 Avançado é possível fazer a animação individual de qualquer elemento e, como opção,

modificar os tempos de transição e o fluxo de cada animação.

Figura 42 – Modo de Animação Avançado onde são exibidas duas linhas de tempo separadas, a da bola amarela

e a vermelha. Ainda temos uma camada para Eventos e outra com a configuração da camada. O tempo daanimação é de pouco mais de dois segundos.Fonte: próprio autor.

Competência 03



46

3.3 Criando uma animação no Modo Avançado

As animações no GWD funcionam baseadas em frames-chave. Um frame-chave é mostrado na linha

de tempo por um losango. Ele marca o momento e a transformação sofrida pelo elemento. O GWD

cria o fluxo entre cada frame-chave para gerar a animação.

Figura 43 – Nesta Figura a bola vermelha possui 4 frames chave em sua linha de tempo, enquanto a bola amarelapossui 5 frames chave.Fonte: próprio autor.

Para adicionar um frame-chave, existem várias formas:

Elementos individuais: clique com o botão 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 vários 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 vários 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 alteração.

Competência 03



47

Uma vez criado o frame-chave, altere as propriedades dos elementos nos quais você deseja criar a

animação. Essa alteração pode incluir o movimento e a rotação dos elementos, mudando a cor, otamanho ou qualquer outro parâmetro.

Os frames-chave são os pontos inicial e final de uma parte da animação. Você pode aumentar o

tempo da animação, desacelerando a animação, aumentando o espaço entre os frames, ou diminuir

o tempo, acelerando a animação, diminuindo o espaço entre os frames. Para isto basta selecionar o

frame e arrastá-lo para esquerda ou direita. O espaço entre os frames é chamado de ‘intervalo’.

Na Figura 43 observe uma linha azul na linha do tempo. Ele é chamado playhead e é a posição

mostrada na área de trabalho. É possível arrastar o playhead para frente e para trás a fim de acessar

diferentes pontos na linha do tempo e testar a animação.

3.3.1 Animações em Loop

Às vezes, definimos uma animação e queremos que ela repita por uma quantidade de vezes ouinfinitamente. Para isto clique no ícone de loop, Figura 44, na camada de animação que você deseja

executar em loop. Irá abrir um menu pop-up. Selecione uma das opções:

Nenhum: a animação não será executada em loop;

Determinado: o número de vezes que a animação será executada em loop;

Infinito: a animação será executada em loop infinitamente.

Figura 44 – Ícone de Loop em destaque e menu pop-up ‘Looping de animação’. Observe uma “sombra” na linha de

tempo indicando a repetição automática.Fonte: próprio autor.

Loop é um termo usado no meio da animação para indicar um processo de repetição.

Competência 03



48

3.3.2 Fluxo de Animação

O fluxo de animação entre os animadores profissionais é conhecido como easing. O easing permite

alterar a aceleração e a desaceleração de uma transição. O Google Web Designer oferece cinco

tipos de easing padrão definidos na especificação CSS3, bem como uma opção de easing

personalizado no modo Linha do tempo avançada.

Figura 45 – Tabela com os fluxos de animação padrão do CSS 3.Fonte: https://support.google.com/webdesigner/answer/3227667?hl=pt-BR&ref_topic=3181123&vid=1-635790704379186261-2157043334

Para fazer um easing personalizado, na linha de tempo avançada, selecione um intervalo com o

botão 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 alças de controle. O ângulo da alça de controle

Competência 03



49

determina a quantidade de curva, e o comprimento da alça controla a força de aceleração ou

desaceleração. Faça vários testes para entender bem como funciona a curva. A qualidade doanimador está no domínio do fluxo de animação.

Figura 46 – Pop-up com as configurações de easing da animação.As bolas que apontam para a curva controlam-na.Fonte: próprio autor.

3.3.3 Animações Aninhadas

Há uma linha do tempo de animação individual para cada contêiner principal. Em muitos casos,

você criará uma linha do tempo para toda a página. Ao utilizar a animação aninhada, colocará todo

o conteúdo da página em uma única linha do tempo.

Quando você fizer o aninhamento de um conjunto de tags dentro de outro, cada contêiner principal

terá sua própria linha do tempo de animação. Isso significa que é possível criar animações

complexas ao aninhar uma animação dentro de outra.

Para criar uma animação aninhada:

1. Crie uma tag que você deseja executar como tag principal, como uma tag <div>.

2. Clique na ferramenta Seleção no painel de ferramentas.

3. Clique duas vezes na tag principal desejada. A tag principal terá, então, um contorno

vermelho e deixará de ser selecionável.

Competência 03



50

4. Adicione seus elementos gráficos e anime-os usando os modos Avançado ou Rápido. Os

elementos e a animação estarão na tag principal que você criou.

5. Para retornar ao nível da página, clique duas vezes no cenário. Agora também é possível

animar o div principal.

Figura 47 – A nova tag <div> é o retângulo em vermelho.Nela temos uma nova linha do tempo independente da linha de tempo da página.Fonte: próprio autor.

Competência 03



51

4.Competência 04 | Manipulando a Timeline com Labels (Marcadores)

O conteúdo multimídia não é apenas formado por imagens, áudio, vídeo e animações, também

possui interatividade. A interatividade é conseguida com eventos. Evento é algo que acontece, claro

que não é qualquer coisa, é algo esperado. No caso do HTML, um clique é um evento possível, o

apertar de uma tecla também.

O legal dos eventos não é o que acontece, mas o que acontecerá depois do evento ocorrer.

Podemos associar ações que serão executadas quando determinados eventos ocorrerem. E com o

GWD isto é muito fácil!

4.1 Criando um Evento

A criação de um evento no GWD é realizada por uma sequência 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 círculo laranja selecionado. O nome escolhido para o Destino foi

‘laranja’. Fonte: próprio autor.

Competência 04



52

Agora, no Painel Eventos clique no ícone de ‘+’, e irá aparecer um pop-up com a lista de Ids da

página, Figura 49. Selecione o Id do destino que você definiu anteriormente. Ele será o elementoque receberá o evento.

Figura 49 – Em destaque o botão para abrir a janela pop-up de criação de evento. No pop-up temos os possíveisDestinos, 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’.

Competência 04



53

Figura 50 – Em destaque o botão para abrir a janela pop-up de criação de evento. No pop-up temos os possíveisDestinos, incluindo o destino ‘laranja’. Fonte: próprio autor.

Depois de definido o evento que inicia a ação, devemos dizer qual é a ação. Na guia Ação temos

vários tipos de ações possíveis. Vamos fazer um elemento desaparecer. Para isso iremos modificar

uma propriedade estilística, o CSS, que é quem define o estilo dos elementos. Selecione ‘Definir

estilos’ em ‘CSS’, como na Figura 51.

Figura 51 – Guia Ação com a lista de ações possíveis. Para alterar as propriedades de algum elemento deve-semudar as propriedades do CSS.Fonte: próprio autor.

Competência 04



54

Mas de qual elemento iremos mudar o CSS?

É na guia ‘Destinatário’ que iremos definir este elemento. Novamente o elemento destinatário 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 Destinatário. Selecionamos o elemento que sofrerá as modificações do CSS.Ele deve possuir um ID para ser listado aqui.Fonte: próprio autor.

Agora devemos definir as configurações, ou seja, aquilo que queremos que aconteça nas

propriedades do destinatário e como ocorrerá. Podemos adicionar várias modificações nas

propriedades, como posição, cor, transparência, etc. Para isto, vamos clicar no ícone de ‘+’ e

escrever uma propriedade CSS. É muito bom que você conheça 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 ação. Observe na Figura 53.

Competência 04



55

Figura 53 – Guia Configurações. Na Figura temos a configuração de opacity do elemento destinatário definida para0, invisível, com efeito de easing, fluxo de animação, como linear e duração de 0,5, meio segundo.Fonte: próprio autor.

Ao final, clique em Salvar e você verá o evento definido no Painel Eventos, Figura 54. Caso queira

apagá-lo, selecione e clique no botão de lixeira ao lado do botão de ‘+’. Caso queira editar, dê dois

cliques no evento.

Figura 54 – Painel Eventos com um evento definido.Fonte: próprio autor.

Para ver o funcionamento clique no botão de ‘Visualização’ e selecione o navegador que irá ver a

animação.

Competência 04



56

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 botão

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.Fonte: próprio autor.

Para remover um evento na linha do tempo clique com o botão direito no evento a ser removido e

selecione Remover evento no menu pop-up.

4.3 Adicionar Rótulos à Linha do Tempo

Podemos nomear frames, marcando-os, para direcionar o fluxo de animação para estes frames.

Assim, podemos pular partes da animação e voltar utilizando eventos. Estes nomes são chamados

de Rótulos.

Para isto, clique no frame que deseja adicionar um rótulo com o botão direito do mouse, na camadaEventos. Selecione a opção ‘Adicionar rótulo...’, como na Figura 55. Irá aparecer uma caixa de texto

Competência 04



57

para você digitar o nome do rótulo.

Ao pressionar enter o rótulo será adicionado à linha de tempo, na camada eventos, Figura 56.

Figura 56 – Rótulo ‘início’ adicionado na camada Eventos.


Para remover o rótulo ou renomear, clique com o botão direito no rótulo e selecione a opção

adequada para a ação.

Pronto!

Treine estes conhecimentos até entendê-los. Através da prática eles ficaram mais fáceis. Depoisdisso, a criatividade é o limite.

Um último conselho. Coloque nomes de identificadores e rótulos simples, sem acentos, espaços ou

caracteres especiais. Às vezes, os navegadores encrencam um pouquinho com eles.

Competência 04



58

5.Competência 05 | Conhecer Técnicas de Edição e Montagem de Vídeo

para Web

O GDW possui uma coleção de componentes integrados. Um componente é uma funcionalidade

pronta e personalizável que você pode adicionar em seu conteúdo multimídia.

O GWD já vem com vários componentes prontos como:

Galeria Alternável;

Galeria Carrossel;

Galeria 360º;

Vídeo;

YouTube;

Áudio;

Entre outros.

Você pode adicionar novos componentes da www.richmediagallery.com/ apenas baixando oarquivo 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 animação. Para

isso vá até o Painel Componente, clique e arraste o componente Áudio para o cenário e solte. Irá

aparecer uma tag representando o componente, Figura 57. A tag mostra a área onde os controlesaparecerão se forem configurados para aparecer.

Competência 05



59

Figura 57 – Painel Componentes com a Guia Áudio destacada.Na área de trabalho a figura representativa do componente adicionado.Fonte: próprio autor.

Para que o áudio toque é preciso que o arquivo esteja na pasta do projeto. Então, não se esqueça

de copiar o arquivo de áudio para ela.

Agora você precisa definir as configurações 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.

Competência 05



60

Figura 58 – Painel Propriedades exibindo as Propriedades do componente.Fonte: próprio autor.

Na Figura 59 você encontra uma tabela com as opções e uma explicação. Caso o áudio não toque,

observe as opções configuradas.

Figura 59 – Tabela com as opções das propriedades do componente Áudio.Fonte: https://support.google.com/webdesigner/answer/6124468?hl=pt-BR&ref_topic=3181232&vid=1-635790704379186261-2157043334

5.2 Componente Vídeo

O componente Vídeo adiciona um player de vídeo ao anúncio. Da mesma forma que você fez com o

componente de áudio, clique e arraste um componente de vídeo do painel Componentes para o

cenário.

Depois copie o arquivo de vídeo para a pasta do projeto. Se fizer isto em Origem basta colocar o

Competência 05



61

nome do arquivo.

Agora vá ao painel Propriedades e configure o componente. As opções são as mesmas do

componente Áudio, Figura 60.

Figura 60 – Painel Propriedades exibindo as Propriedades do componente Vídeo.Fonte: https://support.google.com/webdesigner/answer/3232399?hl=pt-BR&ref_topic=3181232&vid=1-635790704379186261-2157043334

Para visualizar o resultado, clique no botão 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

cenário, Figura 61.

Competência 05



62

Figura 61 – Painel Componentes com a Guia Áudio destacada.Na área de trabalho a figura representativa do componente adicionado.Fonte: próprio autor.

Agora vá ao painel Propriedades e configure as Propriedades do componente. Não se esqueça de

colocar um nome no componente. Este nome é necessário para que as funcionalidades aconteçam.

Para este componente você não precisa copiar os arquivos para a pasta do projeto. Ele possui um

botão ao lado do campo Imagens para selecionar os arquivos que serão exibidos na galeria, Figura

62. A descrição com o restante das opções pode ser vista na Figura 63.

Figura 62 – Selecionando arquivos de imagem para serem exibidos na galeria carrossel.


Competência 05



63

Figura 63 – Tabela com as opções das propriedades do componente Galeria Carrossel.Fonte: https://support.google.com/webdesigner/answer/3195037?hl=pt-BR&ref_topic=3181232&vid=1-635790704379186261-2157043334

Para ver o resultado clique no botão Visualizar.

5.4 Publicando seu Trabalho

O conteúdo multimídia produzido no GWD, como dito logo no início, é todo escrito em HTML, CSS e

JavaScript. Para inserir em uma página você cria uma tag <iframe> com o tamanho de seu conteúdo

e o direciona para a página principal dele.

Tudo que você produz fica em uma pasta nomeada e localizada por você logo no início do trabalho.

É só copiar ela para o local de seu site. Com o <iframe> apontando para a página principal de seu

conteúdo, ele será visualizado corretamente.

Competência 05





64

Conclusão

Espero que você tenha se divertido em aprender a produzir conteúdo multimídia 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 também que você aprendesse a tecnologia que a ferramenta utiliza:

HTML, CSS e JavaScript. Assim, você poderá compreender e fazer mais e melhor.

O conteúdo multimídia é fantástico e enriqueceu muito a experiência com a internet, mas ele

depende da criatividade de quem utiliza. No começo, quando você ainda está aprendendo, é bom

copiar as ideias de que você mais gosta, mas um bom profissional produz boas ideias, não as copia.

É através da prática e treinamento que você desenvolverá a criatividade e fará belíssimos trabalhos

originais.

Até a próxima.



65

Referências

GOOGLE Web Designer [Internet]. Central de Ajuda do Google Web Designer. Disponível 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, Tácio. Web design responsivo: páginas adaptáveis para todos os dispositivos. São Paulo:

Casa do Código, 2012.

SILVA, Mauricio Samy. CSS3: desenvolva aplicações web profissionais com o uso dos poderosos

recursos de estilização das CSS3. São Paulo: Novatec Editora, 2012.

SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo

em cascata. São Paulo: Novatec Editora, 2008.

SILVA, Mauricio Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. São Paulo:

Novatec Editora, 2008.

SILVA, Mauricio Samy. JQuery: a biblioteca do programador Javascript. 2.ed. São Paulo: Novatec

Editora, 2010.



66

Minicurrículo do Professor

Ewerton Mendonça é formado em Sistemas de Informação pela UPE e Design pela UFPE, com mestrado em

Ciência da Computação pela UFPE. Atualmente, é professor da Faculdade de Ciências e Letras de Caruaru –

FAFICA e professor substituto no IFPE em Belo Jardim. Possui experiência na área de desenvolvimento WEB e

design gráfico desde 1998.



Date post:	06-Jul-2018
Category:	Documents
Upload:	kraus-jatoba
View:	218 times
Download:	0 times

Caderno de INFO(Multimídia 2015.2

Documents