4D v16.3

Botões imagem

Página Inicial

 
4D v16.3
Botões imagem

Botões imagem  


 

Usar  

Um botão imagem pode ter diferentes estados, por comparação, um botão padrão aceita três estados: ativo, desativado e pressionado. Como seu nome indica, um botão imagem representa cada estado com uma imagem diferente.

Os botões imagem podem ser utilizados de duas maneiras:

  • como botões de comando em um formulário. Neste caso, o botão imagem inclui geralmente quatro estados diferentes: ativo, desativado, pressionado e ao passar com o mouse em cima. Este modo de funcionamento é utilizado pelo assistente de criação de formulários para a maioria de telas de formulários. 
  • como botão imagem permite ao usuário escolher entre várias opções. Neste caso, um botão imagem pode ser utilizado em lugar de um menu imagem suspenso. Com Menu Imagem suspenso, todas as opções são apresentadas simultaneamente (como os elementos no menu suspenso), enquanto que o botão imagem mostra as opções consecutivamente (a medida que o usuário clica no botão).
    Este é um exemplo de um botão imagem. Suponha que você queira dar aos usuários de uma aplicação personalizada a oportunidade de escolher a linguagem da interface para a aplicação. Você pode implementar a opção como um botão imagem em uma caixa de diálogo personalizada de propriedades, como se mostra a seguir:
    Ao clicar no objeto muda a imagem.
    O botão imagem é implementado da seguinte maneira. Primeiro, se prepara um gráfico no qual a série de imagens esteja organizada em filas, colunas, ou na tabela. É possível adicionar este gráfico à [#title id="581"/], a uma variável imagem, ou a um arquivo imagem. O botão de imagem está desenhado para mostrar somente uma imagen por vez de uma série de imagens

    É possível organizar as imagens em colunas, filas ou em tabelas (como é mostrado na imagem anterior). Quando você organiza imagens em uma tabela, as imagens são numeradas da esquerda para a direita, fila por fila, começando por 0.
    Por exemplo, a segunda imagem da segunda fila de uma tabela de quatro filas e três colunas, é a de número 4.

    Nota: A Biblioteca de imagens inclui características que lhe permitem organizar uma imagem como uma tabela de miniaturas. Quando uma imagem foi definida como uma tabela de miniaturas, é possível criar um botão de imagem arrastando o nome da imagem da Biblioteca.

Os botões de imagem tem as seguintes propriedades específicas:

  • No tema “Imagem”, defina a fonte da imagem utilizando a lista suspensa “Fonte”. É possível escolher entre Variável, Biblioteca de imagens, Arquivo de recursos e Arquivo. Uma vez definida a fonte da imagem, introduza o nome (se a imagem é uma variável) ou o número (se a imagem provém da biblioteca de imagens ou de um arquivo de recursos) ou a rota de acesso (se a imagem vem de um arquivo de imagem) relativa à pasta Resources do banco de dados” (ver o parágrafo “ Referenciar automaticamente arquivos de imagem).
  • No tema “Recorte”, defina o número de filas e colunas que compõem a tabela de miniaturas. Em nosso exemplo, utilizamos uma imagem que consta de três colunas e duas filas.
  • No tema “Animação”, é possível definir o modo de visualização do botão imagem e seu funcionamento. É possível combinar várias opções. Este ponto é descrito com mais detalhes no parágrafo a seguir.
    Nota: A variável associada a um botão de imagem retorna o número de índice, na tabela de miniaturas, da imagem mostrada atualmente. A numeração de imagens da tabela começa por 0.

Aqui estão as diferentes opções de visualização e funcionamento de botões de imagem. Naturalmente, estas opções podem ser combinadas.:

  • <Nenhuma opção marcada>
    Mostra a imagem seguinte da série quando o usuário clica no botão; mostra a imagem anterior da série quando o usuário pressiona a tecla Shift e clica. Quando o usuário alcança a última imagem da série, a imagem não muda quando o usuário clica novamente. Ou seja, o botão não volta para a primeira imagem da série.
  • Alterar constantemente ao clicar
    É similar ao anterior exceto que o usuário pode manter presionado o botão do mouse para mostrar a imagem continuamente (ou seja, como uma animação). Quando o usuário alcança a última imagem, o objeto não volta para a primeira imagem.   
  • Voltar ao início
    É similar ao anterior exceto que as imagens são mostradas em um ciclo contínuo. Quando o usuário alcança a última imagem e clica novamente, a primeira imagem aparece e assim sucessivamente.
  • Alterar ao passar o cursor em cima
    O conteúdo do botão de imagem é modificado quando o cursor passa por cima. A imagem inicial é restabelecida quando o cursor deixa a área do botão. Este modo é utilizado com frequência em aplicativos multimídia ou em documentos HTMLA imagem mostrada é a última da tabela de miniaturas, a menos que esteja selecionada a opção Usar Última Imagem Quando Desativado. Se esta opção está selecionada, a imagem que se exibe é a miniatura seguinte à última.
  • Voltar ao soltar o clique
    Este modo funciona com duas imagens. Mostra a primeira imagem todo o tempo exceto quando o usuário clica no botão. Neste caso, a segunda imagem é mostrada até que o usuário solte o botão do mouse, com o qual volta à primeira imagem. Este modo lhe permite criar um botão de ação com uma imagem diferente para cada estado (normal e pressionado). É possível utilizar este modo para criar um efeito 3D ou mostrar qualquer imagem que represente a ação do botão.
  • Usar Última Imagem se Desativado
    Este modo lhe permite definir a última miniatura como a miniatura a se mostrar quando o botão estiver inativo. Quando este modo está selecionado, 4D mostra a última miniatura quando o botón está inativo. A miniatura utilizada quando o botão está inativo é tratada a parte por 4D: quando você combina esta opção com as opções “Mudar continuamente ao clicar” e “Voltar para o início”, a última imagem é excluída da sequência associada com o botão e só aparece quando o botão está inativo.
  • Mudar a cada x tiques
    Este modo permite fazer um ciclo através do conteúdo do botão de imagem a uma velocidade específica (em tiques). Por exemplo, se você põe 10, as miniaturas mudarão a cada 10 tiques. Neste modo, todas as outras opções são ignoradas.

Nota: Observe que a opção Transparente (tema “Aparência”) também pode ser utilizada para definir a representação do botão de imagem (torna o fundo da imagem transparente).

Por exemplo, você deseja definir um botão que aceite os seguintes modos: Voltar ao soltar o clique, Mudar ao passar o cursor por cima e Usar última imagem quando desativado.
No caso de uma tabela de miniaturas que tem uma fila e quatro colunas, cada miniatura corresponde aos seguintes estados: padrão, pressionado, curso por cima e desativado.
Na Lista de propriedades é possível definar as seguintes propriedades: 1 fila, 4 colunas bem como as opções Voltar ao soltar o clique, Mudar ao passar o cursor por cima e Usar última imagem quando desativado.



Ver também 

Arrastar e soltar da biblioteca

 
PROPRIEDADES 

Produto: 4D
Tema: Trabalhar com objetos ativos

 
HISTÓRIA 

 
ARTICLE USAGE

Manual de Desenho 4D ( 4D v16)
Manual de Desenho 4D ( 4D v16.1)
Manual de Desenho 4D ( 4D v16.3)