Novo endereço

O blog migrou para o site:

http://www.webjornalismo.ufsc.br/fabio

* Antes de acessar o site baixe a última versão do FIREFOX.

Plataformas online para criar vídeos interativos

O site Ved.io desenvolveu uma ferramenta que possibilita a inserção de elementos como texto, links e imagens em vídeos, tornando-os interativos. Isso funciona online e de forma simples. Para criar a interatividade, basta parar o vídeo e selecionar os tipos de conteúdos que vão ser adicionados. Quem assiste, vai poder ver os elementos em uma tela ao lado e ainda navegar como se fosse um conteúdo independente. Veja a apresentação em vídeo da plataforma da Beta.

You Tube – Já permite que se coloque links nos vídeos direcionando-os para uma determinada cena do vídeo. (GJol)

Asterpix

Compulsion

Veja mais:

- Link TV – Aprenda a editar vídeo online (JW)

- Web vídeo: 7 estratégias e 7 mitos (OJB)

Áudio slide show

1. Abrir arquivo modelo.fla (download dos arquivos abaixo).

2. Agrupar ( CTRL+G ): elementos do layout como linha pontilhada, moldura e retângulo; botões números e botões anterior e próximo. * Caso necessite desagrupar ( CTRL+SHIFT+G ).

3. Clicar no primeiro frame para selecionar todos os objetos do palco (stage).

4. Com os objetos selecionados, clicar sobre eles com o botão direito do mouse e escolher a opção “Distribute to Layer”.

5. Organizar as camadas (layers), renomeando-as e, se necessário, alterando as posições entre elas.

6. Renomear a primeira camada para “actions” e, no primeiro frame, inserir na cx de actions ( F9 ) a ação “stop();” sem as aspas. Clicar no frame 200, inserir um quadro-chave em branco ( F7 ) e o código na cx de actions: “gotoAndPlay(2);” – sem as aspas.

7. Desagrupar ( CTRL+SHIFT+G ) e converter para botões ( F8 ) os seguintes objetos: Anterior, Próximo, Play Slide Show, cada um dos números (1, 2, 3, 4 e 5), seta Segue (à direita) e seta Volta (à esquerda). No total são 10 botões.

8. Criar nova camada e importar as imagens ( CTRL+R ). Em seguida, alinhá-las ( CTRL+K ) e clicar com o botão direito do mouse escolhendo a opção “Distribute to Layer”.

9. Renomeie a camada que ficou em branco para “Áudio”. Mais a frente a utilizaremos para inserir o som.

10. Clique e arraste os quadros-chave das respectivas camadas deixando 50 frames (quadros) entre eles. Complemente os espaços entre um e outro quadro-chave com frames ( F5 ).

11. Na camada legenda, criar mais quatro quadros-chave ( F6 ) e inserir suas respectivas legendas, uma em cada um dos cinco quadros-chaves (se necessário, editá-las para caber no espaço determinado). Inserir o título e complementar os espaços com frames ( F5 ) para que permaneça no palco durante toda a apresentação – diferente das legendas que mudam com as fotos.

12. O próximo passo é colocar as ações nos botões, criados no item 7.
- no botão play slide show: on(release){ play(); }
Inserir mais quatro quadros-chave (F6) de 50 em 50 frames, no primeiro vão as ações abaixo, para os próximos alterar o número dos frames correspondentes para qual quadro vai quando clicado no botão:
- no botão anterior: on(release){ gotoAndStop( VALORES DE 50 EM 50 ); }
- no botão próximo: on(release){ gotoAndStop(50); } // depois 100, 150 e 200
- no botão seta à esquerda: on(release){ gotoAndStop(1); } // 1,50,100 e 150
- no botão seta à direita: on(release){ gotoAndStop(50); } // 50,100,150 e 200.

13. Os botões números (de 1 a 5) vão servir para dar uma amostra (preview) da foto que vai aparecer na sequência ou se clicado nesses botões. Para cada um dos cinco números repita os passos: 13 a 16. Clicar duas vezes no botão “1″ ou clicar com o botão direito do mouse e escolher a opção Edit in Place.

14. No frame “Over” inserir um quadro-chave ( F6 ), abrir a biblioteca ( CTRL+L ), clicar e arrastar a imagem correspondente (no botão número 1 a imagem 1, 2 para a imagem 2…) no palco.

15. Clicar na imagem, ainda dentro do botão no frame Over, diminuir o tamanho para 80 de altura (imagens horizontais) ou 80 de largura (imagens verticais) – cx de propriedades, inserir os valores nos campos H ou W, com cadeado conectado, para que a imagem diminua de forma proporcional.

16. Comandos para os botões:
botão 1: on(release){ gotoAndStop(1); }
botão 2: on(release){ gotoAndStop(50); }
botão 3: on(release){ gotoAndStop(100); }
botão 4: on(release){ gotoAndStop(150); }
botão 5: on(release){ gotoAndStop(200); }

17. No menu superior, clicar em Insert > New Symbol… ( CTRL+F8 ) > Movie Clip.

18. No menu superior File > Import to Library > Selecionar o som ( .WAV ou .MP3 ). Abrir a bilioteca ( CTRL+L ), clicar e arrastar o som da biblioteca para o palco. Renomear a camada para som e depois inserir um quadro-chave em branco no frame 2 ( F7 ).

19. Ainda no MovieClip, inserir duas novas camadas e renomeá-las para “actions” e “bto Som”. Na primeira, colocar o comando stop();

20. Na segunda camada, abrir a biblioteca ( CTRL+L ), clicar e arrastar o símbolo botão “bto_Som” para o palco no frame 1 – em seguida inserir um quadro-chave ( F6 ) no frame 2.

21. Vão ser duas ações diferentes, uma no botão da frame 1 e outra no botão da frame 2. Clicar no botão da frame 1 e inserir o código: on(release){ stopAllSounds(); gotoAndStop(2); }

22. Inserir a ação no botão da frame 2: on(release){ gotoAndStop(1); }

23. Voltar a Scene1 ( CENA1 ). Nova camada, renomeá-la para Áudio. Abrir a bilioteca ( CTRL+L ), clicar e arrastar o movieClip criado da biblioteca para o palco, na camada Áudio.

24. No frame 2 da camada Áudio, inserir um quadro-chave em branco ( F7 ).

25. Salvar e testar o filme Control > Test Movie ( CTRL+ENTER ).

Arquivos:
- modelo.fla (125 Kb) e legendas.txt (3 Kb)
- Temas: Terremoto na China (.zip / 794 Kb), Inauguração da Ponte Estaiada (.zip / 858 Kb), Memória Zélia Gattai (.zip / 645 Kb), Tocha Olímpica (.zip / 648 Kb).

Linha do Tempo

Passo-a-passo:

1. Baixar e abrir o documento linhadotempo01.fla (arquivo FLA abaixo) e renomear a Layer 1 para “mcConteudo”.

2. Selecionar os todos os objetos do palco (dica: na timeline, clique no frame que contém os objetos e todos os objetos, desse frame, serão selecionados).

3. Transformar em movie clip. Modify > Convert to symbol… ( ou F8 ).

4. Escolha a opção (type) Movieclip e clique em OK.

5. Selecionar o movie clip criado e, na cx de propriedades, preencher o campo como “conteudo” – sem aspas. Essa etapa é essencial para funcionar corretamente.

6. Duplo clique no movieClip (ou botão direito > Edit in Place).

7. Selecionar o frame 35 e inserir na timeline um novo quadro-chave ( F6 ).

8. Selecionar todos frames da layer (do primeiro até o último quadro-chave) e clicar com o botão direito e inserir Create Motion Tween.

9. Agora, clique no último quadro-chave e altere a posição do objeto deixando, nesse caso, o texto e imagem sobre a TV em 1990 na área do palco (foto do Serginho Groisman).

10. Inserir nova layer com a ação de stop no primeiro frame.

11. Voltar a aba Scene1 e inserir nova layer. Renomeá-la para “botões”.

12. Criar dois botões ( F8 ) um para adiantar e outro para retroceder.

13. Clicar no botão da direita para adiantar e, na cx de Actions ( F9 ), escrever o código:
on(release){
conteudo.nextFrame( );
}

14. Clicar no botão da esquerda para retroceder e, na cx de Actions ( F9 ), escrever o código:
on(release){
conteudo.prevFrame( );
}

15. Salvar e testar o filme (Control > Test Movie ou CTRL+ENTER).

………………………………………………………………………………………………………………………………………………………

Arquivo: linhadotempo01 (FLA / 538 Kb)

………………………………………………………………………………………………………………………………………………………

Jornalismo 2.0

Livro (.PDF / 3.2Mb) de Mark Briggs que fala sobre Jornalismo na Era Digital – Como Sobreviver e Prosperar.

http://knightcenter.utexas.edu/Jornalismo_20.pdf

Infográfico 4

Infográfico 3

Infográfico 2

Tutorial passo-a-passo

1. Posicionar a sardinha perto da lata.

2. Inserir uma nova layer (camada) e renomeá-la para máscara.

3. Clicar na frame 1 (quadro 1) da layer máscara e em seguida selecionar a ferramenta retângulo na caixa de ferramentas (lado esquerdo).

4. Ainda na frame 1 da layer máscara, inserir um retângulo cobrindo a parte superior da lata.

5. Agora, na layer da sardinha, clicar na frame 15 (não é obrigatório ser esse o número da frame pode ser outro qualquer) e inserir um keyframe (quadro-chave) (F6).

6. Selecionar os dois quadros-chave da layer sardinha e depois clicar com o botão direito do mouse sobre a seleção. Vai aparecer uma janela com menu. Escolher o primeiro item – Create Motion Tween.

7. Completar as outras duas layers com os frames que faltam (F5).

8. Clicar com o botão direito na layer máscara e selecionar o item Mask

9. Alterar a posição da sardinha (segundo Keyframe – quadro 15 – da layer sardinha), subindo até ficar escondida pelo retângulo-máscara.

10. Testar o filme (CTRL+ENTER)

Infográfico 1

Tutorial passo-a-passo

1. Inserir uma nova layer (camada) e renomeá-la para máscara

2. Clicar na frame 1 (quadro 1) da layer máscara e em seguida selecionar a ferramenta retângulo na caixa de ferramentas (lado esquerdo).

3. Ainda na frame 1 da layer máscara, inserir um retângulo cobrindo todo o gráfico.

4. Clicar na frame 15 (não é obrigatório ser esse o número da frame pode ser outro qualquer) e inserir um keyframe (quadro-chave) (F6).

5. Selecionar os dois quadros-chave da layer máscara e depois clicar com o botão direito do mouse sobre a seleção. Vai aparecer uma janela com menu. Escolher o primeiro item – Create Motion Tween.

6. Selecionar novamente o primeiro frame (layer máscara) e, na caixa de propriedades (parte inferior da tela), alterar o valor da largura (width) para 1 pixel.

7. Completar com os frames que faltam nas outras duas layers.

8. Clicar com o botão direito na layer máscara e selecionar o item Mask

9. Testar o filme (CTRL+ENTER)

Tutoriais e exemplos em flash

Efeitos:
Tween Motion
Tweening shape
Efeito Máscara
Motion guide

Exemplos e aplicações:
Motion Blur
Efeito Contorno
Alpha e cores
Guia de Movimento
Texto Morphing

Vídeos tutoriais:
Motion Tweens
Shape Tween Morph
Mascaras
Motion guide