Gestor de Paineis

O Gestor de Paineis é um aplicativo do Optimanager  que permite criar animações em Flash ou HTML5. Estas animações são compostas por fotografias, a que chamamos telas, que estão em rotação continua no site. Resumindo, o painel é um elemento animado composto por várias telas (fotografias) separadas por efeitos gráficos de transição num ciclo continuo e repetitivo.

Para se criar um Painel deve seguir os seguintes passos:

• Escolher e criar o tipo de painel que pretende (Flash, HTML5, Carousel ou BXSlider)
• Adicionar telas / fotografias ao Painel
• Configurar as telas separadamente

Painel em Flash

O programa converte uma sequência de telas (fotografias) e respectivas animações de transição numa animação em Flash. Este tipo de painel tem visto a sua popularidade diminuir consideravelmente em muito devido à incompatibilidade do Flash com os dispositivos móveis da Apple como o iPhone. De todas as maneiras mantemos este formato pois tem características únicas e efeitos gráficos elaborados que permitem a construção de animações fantásticas e originais.

O painel em flash é constituído pelos seguintes campos:

Nome: Identificação do Painel

Comprimenro e Altura: Medidas em pixeis do painel, em alguns casos fixas, noutros variáveis.

Botões de Controlo são os botões que permitem manualmente alternar para a fotografia seguinte, para a anterior ou parar a animação em flash.

Visibilidade: Selecciona se os botões de controlo estão visiveis, invisiveis ou automáticos. No modo automático só aparecem quando o cursor do rato passa por cima do painel.

Posição x e y: Posição no painel onde irão aparecer os botões, os valores, em pixeis, correspondem ás coordenadas do canto superior esquerdo. Deverá fazer um cálculo, tendo em vista o tamanho do painel, para determinar as coordenadas (x,y) onde pretende que apareça os botões.

Altura: Define o tamanho dos botões de controlo, ao aumentar a altura o programa aumenta automáticamente a largura dos botões.

Estado: Define se o painel está visivel ou não

As restantes configurações são feitas separadamente em cada tela do painel. No Painel Flash a duração de cada tela, o efeito de transição e o tempo de transição podem ser configurados indivudualmente em cada tela. Desta forma pode ter telas que aparecem 10 segundos e outras que aparecem apenas 5, pode misturar vários efeitos de transição criando uma animação mais complexa e apelativa. Mais à frente explicamos o funcionamento destes campos adicionais.

Painel HTML5

Tal como o anterior, o programa converte uma sequência de telas (fotografias) e respectivas animações de transição numa animação em HTML5. Este formato tem vindo a ganhar cada vez mais adeptos em função da sua compatibilidade com todas as plataformas e dispositivos. Com efeitos gráficos apelativos e todas as funções que se esperam de um bom painel, este é o tipo de painel mais usado pelos clientes da Optimeios.

O painel em flash é constituído pelos seguintes campos:

Nome: Identificação do Painel

Comprimenro e Altura: Medidas em pixeis do painel, em alguns casos fixas, noutros variáveis.

Botões de Controlo são os botões que permitem manualmente alternar para a fotografia seguinte, para a anterior ou parar a animação em flash.

Setas de Controlo são os botões que permitem manualmente alternar para a fotografia seguinte ou para a anterior.

Icons de Controlo são os pequenos circulos que representam cada uma das telas do painel e que podem ser usados para ir directamente para uma determinada tela. Estes pequenos botões aparecem normalmente por baixo do painel.

Efeitos de Transição: Animações gráficas que aparecem nas transições de uma tela para a outra

Duração: Tempo em segundos durante o qual cada tela fica visivel

Transição: Efeito de transição

Tempo: Número entre 1 (muito rápido) e 50 (muito lento) que define a velocidade do efeito de transição

Nº de Colunas e Nº de Linhas: Define o comportamento do efeito de transição nas telas

Estado: Define se o painel está visivel ou não

Painel Carousel

Este tipo de painel em HTML5 permite criar animações diferentes conforme o exemplo que apresentamos em baixo:

Os campos que permitem configurar este painel são os seguintes:

Nome: Identificação do Painel

Comprimenro e Altura: Medidas totais em pixeis do painel 

Tipo: Existem dois tipos de botões conforme mostramos na imagem em cima

Comprimento e Altura da Tela: Medida aplicada à tela activa do painel, ou seja a que aparece totalmente no centro. No exemplo em cima corresponde à medida laranja.

Largura Visível: Medida em pixeis da parte que se vê das telas anteriores e seguintes. No exemplo em cima corresponde à linha verde.

Altura Reduzida: Medida em altura correspondente à redução do tamanho das imagens anteriores e seguintes. No exemplo em cima corresponde à linha rosa. Caso este valor seja 0 todas as telas vão ter a mesma altura.

Ajuste de Imagem: Configura se pretende que as fotos sejam redimensionadas para ocupar a medida da tela definida atrás, ou se são cortadas ao tamanho da tela.

Tempo entre Telas: Quantidade de Tempo em segundos que cada tela fica visivel até aparecer outra.

Tempo da Animação: Duração do tempo em segundos que demora o efeito de transição entre telas.

Nº de Telas Visiveis: No exemplo atrás verifica que existem sempre 7 telas visiveis, uma totalmente visivel e as outras parcialmente.

Thumbnails: Em manutenção, não está a funcionar.

Botões de Navegação: Setas de deslocamento manual sempre visiveis ou apenas quando o cursor do rato passa por cima do painel.

Ajuste Vertical: Medida em pixeis da margem superior do painel

Estado: Define se o painel está visivel ou não

BXSlider

Painel que permite criar uma animação em HTML5 responsiva, ou seja, que se adapta ao tamanho da janela do browser. Pode assim criar paineis que vão de um extremo ao outro da janela. Este tipo de painel ignora as configurações de bordo disponíveis nos outros paineis em virtude do efeito a que se destina.

Os campos que permitem configurar este painel são os seguintes:

Nome: Identificação do Painel

Comprimenro: De 990 pixeis até ao tamanho que desejar

Altura: Automática

Transição: Seleccione se pretende que as telas alternem automáticamente ou manualmente. No modo automático pode seleccionar se quer activar os botões de slide Play e Stop

Efeito de Transição: Seleccione o tipo de efeito gráfico que pretende para a transição das fotografias.

Multi-Slide: Indique se pretende ter várias telas simultaneamente visiveis.

Comprimento do Slide: Medida em pixeis correspondente a cada uma das telas visiveis

Mínimo e Máximo de Slides: Número mínimo e máximo de telas visveis simultaneamente

Margem do Slide: Distância entre as telas visiveis

Setas de Controlo: Setas de deslocamento manual em cima do painel.

Icons de Controlo: são os pequenos circulos que representam cada uma das telas do painel e que podem ser usados para ir directamente para uma determinada tela. Estes pequenos botões aparecem normalmente por baixo do painel.

Duração: Quantidade de Tempo em segundos que cada tela fica visivel até aparecer outra.

Deslocamento: Transição entre telas, horizontal, vertical ou esvanecer

Tempo: Velocidade do efeito de transição em ms (1 muito rápido e 2000 muito lento)

Estado: Define se o painel está visivel ou não

Nota: Para activar o BXSlider nos Planos e-Commerce é necessário uma pequena alteração na opção Design. Deverá entrar assim em Conteúdos > Design > Editar Design > Grupo Superior > Moldura e no campo Estado da Moldura seleccionar a opção Inactiva caso contrário a moldura não deixará o banner estender-se em toda a largura da página.

Fotografias

Nesta opção adiciona telas (fotografias) aos paineis.  Primeiro selecciona o painel no campo Paineis terminando com um clique na lupa, e em seguida adiciona as fotografias em baixo.

Associado a cada fotografia (tela) existem 5 botões cuja funcionalidade explicamos em baixo:

1. Permite mudar a ordem das telas no painel

2. Permite editar individualmente as configurações da tela e definir links e comentários para cada uma.

3. Apagar a tela

4. Visualizar a fotografia da tela no tamanho original

Opções Extras das Telas para as Animações em Flash

Link: Se pretender colocar um link nessa tela coloque aqui o endereço. Esse endereço deve conter "http://"

Target: Defina onde quer que abra a página do endereço colocado em Link

Duração: Tempo em segundos durante o qual a tela ficará visivel antes de mudar para outra tela

Transição: Escolha o efeito de transição para esta tela. O efeito de transição aparece quando uma tela alterna para a seguinte.

Tempo: Tempo em segundos que demora a transição.
 

Também é possível escrever uma frase sobre as telas. Os campos seguintes definem o texto e a formatação da letra. Escreva o texto e a Posição (x,y) correspondente á posição do canto superior esquerdo da primeira letra no painel. O cálculo da posição é semelhante ao que fizemos na 1ª Parte nos botões de controlo. Em seguida defina o Comprimento em pixeis do espaço para escrever. Esta medida cria uma caixa invisivel onde o texto vai aparecer, se a caixa é menor que o tamanho do texto este irá aparecer em duas ou mas linhas. No campo Rotação define o orientação do texto, por exemplo 0º é horizontal, 90º vertical, 45º diagonal. Os campos seguintes definem o formato da letra (tamanho, cor, alinhamento etc.)

De igual modo é possível desenhar sobre o painel uma caixa, onde por exemplo, poderá aparecer o texto definido em cima. Os campos seguintes definem a posição, tamanho, cor e transparência dessa caixa.