Versão 5.0

A edição de conteúdo no sítio segue padrões de ferramentas encontradas em diversas plataformas. Mesmo assim há diversos pontos específicos que podem ser mais complicados para os “não-iniciados”. Por este motivo preparamos esta ajuda. Ela está organizada de forma a ser o mais enxuta possível, funcionando como um “tour” pelo programa. Por esse motivo é aconselhável que você tenha acesso ao sitio enquanto o lê.

Definições

Mesmo funcionando de forma similar a diversas ferramentas de animação, o sítio parte de uma premissa diferente: ele é criado a partir de uma metáfora da mente. Por esse motivo alguns termos podem parecer estranhos a primeira vista:

• Imagem (image): uma imagem é um elemento usado em sua criação. Ela pode ser tanto uma figura quanto um vídeo, um texto ou até mesmo um som. A imagem é o elemento básico das criações.
• Estado mental (state): para o sítio, o estado tem a mesma função dos keyframes em programas de animação. Cada estado contém um conjunto de imagens dispostas como o usuário quer.
• Pensamento (flow): um pensamento pode ser entendido como uma animação, um conjunto de estados cujo conteúdo é interpolado formando o resultado final.

Fruindo

Para começar o trabalho, abra o sítio (você pode conferir em nosso site, acessando o Sítio de Imaginação em www.ciclope.art.br/sitioimag/). Você encontra algo como a figura 1:

figura 1: Sítio de Imaginação

Nesse momento você está vendo o sítio em seu “modo leitor”, onde você pode assistir e interagir com as animações. Esse modo é bastante útil quando você quer usar o sítio para produzir um site ou uma videoinstalação. Quando você passa o mouse na parte de baixo da tela, verá uma pequena barra de ferramentas de navegação que servem de suporte à fruição pelo conteúdo (quando necessário, essa barra pode ser desativada). Veja a figura 2.

figura 2: barra de ferramentas do modo leitor

Para entrar no modo de edição, clique no penúltimo botão e aguarde a carga da ferramenta.

Edição: primeiras funções

Ao carregar o editor, você verá na parte superior da tela uma barra com botões de acesso às ferramentas de edição. As figuras 3a e 3b mostram as funções de cada uma.

figura 3a: funções da barra de botões superior

figura 3b: funções da barra de botões superior

Após fazer o login, comece criando um novo pensamento. Confirme sua intenção na janela de aviso que aparecerá e, em seguida, clique no botão de properiedades do pensamento. Veja a figura 4.

figura 4: propriedades do pensamento

Na janela da figura acima você pode ajustar as propriedades de seu pensamento, conforme a lista a seguir:

a) área do pensamento (comprimento e largura)
b) velocidade
c) cor a ser usada para destacar um link no modo site
d) exibe um ícone em todas as imagens que tiverem ações (links) para diferenciá-las das demais
e) modo de transição entre estados
f) forma como as imagens irão aparecer e sumir
g) estado para o qual o pensamento volta ao terminar
h) nome do pensamento
i) nome do autor do pensamento
j) script (ação) que o sítio irá executar caso esteja no modo banner e seja clicado
k) área de ajuda para criar scripts de ação (veja adiante)

Uma vez que seu pensamento esteja ajustado (você pode voltar a esta janela sempre que quiser) é hora de salvar pela primeira vez o seu trabalho. Para isso, clique no botão de gravação (disquete). caso queira no futuro fazer uma cópia do pensamento, use o botão do disquete escuro (salvar como). Você poderá sobrescrever pensamentos, salvar como um novo ou até mesmo gravar o pensamento em uma de suas comunidades e dividi-lo com outras pessoas. Lembre-se de gravar seu trabalho com frequência.

Quando um pensamento é gravado, ele recebe um número único que chamamos de id. Você pode ver esse id tanto na janela de gravação do pensamento quanto no canto inferior direito da tela (figura 5). Para acessar diretamente o pensamento e/ou mandá-lo como um link para seus amigos no sítio de imaginação, use o endereço

http://www.ciclope.art.br/sitioimag/?id=#

Na linha acima, substitua # pelo id do seu pensamento.

figura 5: o id do pensamento é 333

Uma vez gravadas as propriedades do pensamento, é hora de incluir imagens. Para isso, clique no botão para abrir a janela de criação de imagens, que você vê na figura 6:

figura 6: janela de criação de imagens

Nesta janela você encontra botões para inseris os diversos tipos de imagem disponíveis no sítio, que são:

• vídeo: vídeos no formato flv, mp4 ou 3gp (codec H.264)
• áudio: somente arquivos no formato mp3
• figura: arquivos jpg, png e gif, além de filmes flash em swf
• texto artístico: textos que podem ser manipulados graficamente no sítio
• parágrafo: textos maiores que têm edição limitada no sítio
• ações: scripts de ações temporizadas (veja adiante)

Todas as imagens se comportam de forma similar, independente do tipo. Para este guia, vamos escolher um texto artístico. Clique no botão correspondente e você verá a janela de criação de imagem, como na figura 7.

figura 7: criação de uma imagem de texto

A partir desta janela você pode optar por usar um texto que já tenha gravado (A) ou criar um novo (B). Na área C digite o texto que quer usar e em D faça alguns ajustes gráficos. Após terminar, clique no botão “ok” e sua imagem será colocada na tela.

figura 8: janela de imagem na tela

Caso não tenha mudado a cor do texto, ele será colocado em preto e você verá apenas a janela ao redor dele, já que o fundo também estará preto (veja a figura 8). Nesse e em outros casos você pode querer alterar propriedades gráficas das imagens. Para isso existe a janela de propriedades das imagens (figura 9).

figura 9: propridades da imagem

Esta janela traz várias “páginas” que são acessadas pelos botões na parte superior. Na primeira delas você pode ajustar o tamanho e a posição da imagem, além do volume (vídeo e áudio) e transparência (alpha). Você pode também arrastar e alterar o tamanho da imagem usando sua própria janela.

O segundo botão mostra as propriedades de cor e roatção. Veja a figura 10. Você pode usá-la em nosso caso para dar uma cor diferente ao texto do pensamento.

figura 10: propriedades de cor e rotação da imagem

Os próximos 4 botões ajustam filtros que você pode aplicar à imagem, como sombra (drop shadow), borda (outline), etc. O último botão permite que você altere os elementos da suas imagem…

As imagens no sítio são como playlists: você pode acrescentar vários elementos a cada uma delas e exibi-los da forma como quiser. No caso de nossa imagem, você pode ter vários textos e alternar entre eles sempre que quiser, e é o gerenciamento dessa plylist que esta página da janela de propriedades faz. Veja a figura 11.

figura 11: elementos da imagem (playlist)

Nessa figura você vê botões para remover um elemento da playlist (remove), adicionar um novo elemento (add), alterar o elemento selecionado (element) e editar as propriedades do elemento (edit), onde você pode, inclusive, alterar o nome. A edição de um elemento também permite que você adicione ações. Veja mais sobre elas adiante.

Para terminar a janela de propriedades, o penúltimo botão mostra algumas configurações importantes. Veja a figura 12.

figura 12: configurações importantes da imagem

Aqui você poderá mudar o nome usado pela instância da sua imagem (A), que é o nome único que todas elas recebem ao serem usadas no sítio. Você pode ainda alterar o elemento da playlist que será exibido (B), forçar a mudança de elemento quando um novo estado é carregado (C) e indicar se a imagem deve ser carregada tocando ou parada (D – vídeos e áudios).

Para terminar essa visão básica do sítio, vamos agora abrir a janela da timeline, como mostra a figura 13:

figura 13: janela de timeline

Na timeline você vê uma lista de todas as imagens usadas (A) e todos os estados (B). Em nosso caso, temos apenas uma imagem e um estado. Em C você vê a ordem em que as imagens estão, com isso é possível posicionar na frente a imagem que você deseja. Os botões D adicionam frames à animação, enquanto E apaga keyframes. Os botões F adicionam e removem estados, enquanto G abre as propriedades do estado onde você pode, inclusive, determinar a cor de fundo.

Pensamentos: fluxos entre estados

Quando seu pensamento é composto por diversos estados, as propriedades das imagens presentes nele são interpoladas o que gera a animação. Para gerenciar isso a timeline é fundamental. As imagens podem estar em cada estado na forma de “frame” ou “keyframe”. No primeiro estado em que uma imagem aparece, ela está sempre na forma de keyframe. Chamamos de “frames simples” as ocorrências seguintes da imagem em que suas propriedades não mudam. Caso existam alterações, elas passam a ser keyframes também.

Fazendo algumas alterações no pensamento que vínhamos desenvolvendo, a timeline ficou desta forma (figura 14):

figura 14: nova timeline

Esta figura mostra a timeline de um pensamento de 3 estados. O nome dessa imagem é “txt1″ e ela está exatamente com as mesmas propriedades nos estados 1 e 2, mudando no terceiro. Qualsquer alterações que as properiedades dessa imagem tenham sofrido (tamanho, posição, cor, etc), serão interpoladas formando uma animação.

Ações: animações interativas

Uma grande possibilidade dos trabalhos feitos no sítio é a possibilidade de interação. Para isso, desenvolvemos um script simples que pode ser usado para alterar properiedades de imagens, carregar pensamenos, abrir páginas na internet…

Essas ações podem ser associadas a cliques em imagens, que passam a atuar como botões ou também ligadas a momentos da execução de um vídeo ou áudio, criando uma espécia de ação temporizada. Em todos os casos em que as ações são póssíveis o sítio apresenta uma ferramenta de auxílio, “script aid”, como na figura 15.

figura 15: criação de scripts de ação

Para usar essa ferramenta basta escolher onde o script irá atuar (A), a ação que será executada (B) e informe os dados necessários que irão aparecer na área C. Depois, basta clicar no botão D (add) para adicionar a ação no script. Um script pode conter várias ações.