Trabalhando com texto responsivo no Adobe Captivate

O texto responsivo é um recurso responsivo importante.

É possível definir o tamanho do texto em todos os pontos de interrupção usando Editar > Gerenciador de estilo do objeto > Formato do texto. O texto de amostra exibe as alterações em diferentes exibições.

Você também pode visualizar as alterações dinâmicas do texto indo de um ponto de interrupção para outro no Projeto responsivo. Você também pode editar o texto dinamicamente em cada tela de ponto de interrupção.  

Quebra de texto em várias exibições

O Adobe Captivate mantém uma relação de pai-filho entre os pontos de interrupção nas exibições Principal-para-tablet e Tablet-para-dispositivo móvel, respectivamente. As configurações feitas para um ponto de interrupção existem em todas as telas inferiores de pontos de interrupção, a menos que você modifique as configurações para uma tela específica e corrompa o link.

Ilustração para demonstrar como o vínculo se quebra

Por exemplo, vamos considerar que você criou uma legenda de texto na exibição de Desktop, então na exibição de tablet e depois na exibição móvel do projeto responsivo. Neste caso, se você for para a exibição do ponto de interrupção em dispositivo móvel, você verá três legendas disponíveis nesta exibição. Se você clicar em cada legenda é possível ver a borda da legenda, cuja cor representa a exibição do ponto de interrupção correspondente. Abaixo se encontra uma demonstração:

Agora, a primeira legenda de texto possui um link conectado à exibição de Desktop. A segunda legenda tem um link conectado à visualização do tablet. Este vínculo fica mais fácil de entender com base na codificação por cores. Suponha que você, na exibição para dispositivos móveis, tenha alterado o texto na segunda legenda (isto é, o texto criado antes na exibição do tablet, como mostrado na figura acima). Neste caso, o vínculo existente para a legenda de exibição do tablet é quebrado e a legenda é considerada como uma legenda própria de exibição para dispositivos móveis. Este vínculo rompido fica mais fácil de entender com base na cor da borda da legenda do segundo texto. Neste caso, a segunda legenda também exibe a cor laranja e não a cor azul.

De forma similar, se você modificar o texto na primeira legenda de texto, então o primeiro link da legenda de texto com a exibição de Desktop será corrompido e considerado como uma legenda de texto nativa da exibição móvel. Abaixo se encontra uma demonstração.

Restauração de vínculos em diferentes exibições

Quando um vínculo é desfeito entre um dispositivo móvel e um tablet ou entre um tablet e pontos de interrupção principais, é possível restaurá-lo aplicando a posição, o texto e as propriedades de texto em todas as exibições.

Aplicar propriedades a todas as exibições

Propriedades da posição

Agora você já pode atualizar propriedades de posição dos objetos em todas as exibições para corresponder às propriedades do elemento do texto selecionado. Para permitir que as propriedades de posição de objeto sejam aplicadas em todas as exibições, um menu contextual se torna disponível ao clicar com o botão direito. Essa configuração restaurará os vínculos entre objetos em diferentes exibições em projetos responsivos.

Suponha que você tenha criado algumas legendas na exibição principal mas ao trabalhar no projeto, você, sem querer, tenha movido a posição da legenda nas exibições de tablet e dispositivo móvel. Suponha também que mais tarde você tenha percebido a alteração e deseje manter a posição que você está usando na exibição principal em todas as outras exibições. Neste caso, você pode selecionar a legenda na exibição principal, clicar com o botão direito e selecionar Aplicar propriedades desta posição em todas as exibições.

Texto e propriedades de texto

Redefina as propriedades dos elementos de texto responsivo ou atualize todas as exibições para corresponder às propriedades do elemento de texto atualmente selecionado. Para permitir que o texto e as propriedades de texto sejam aplicadas em todas as exibições, um menu contextual se torna disponível ao clicar com o botão direito. Essa configuração vinculará novamente os objetos nas exibições de projetos responsivos.

Por exemplo, vamos considerar que você criou algumas legendas de texto na exibição primária, mas modificou o texto e as propriedades do texto (como caracteres, estilo, e assim por diante) nas exibições tablet e móvel. Posteriormente, se você quiser manter o texto e as propriedades do texto da exibição primária em todas as outras exibições, é possível fazê-lo clicando com o botão direito do mouse sobre a legenda de texto na exibição primária e aplicando o texto e as propriedades do texto a todas as exibições. 

Mesmo se vários formatos de texto forem aplicados a cada palavra, como cor ou estilo de fonte, o texto retém o formato em todas as exibições do projeto adaptável. Lista hierárquica ordenada e não ordenada dos fluxos de itens (como texto com marcadores) através de todas as exibições. 

Caso você já tenha definido alguma propriedade de texto para cada ponto de interrupção no gerenciador de estilos de objetos (OSM), então as configurações do OSM serão mantidas. Qualquer alteração subsequente em cada ponto de interrupção não sobrescreve as configurações de OSM. 

Aumento automático

O Adobe Captivate permite o ajuste do tamanho de fonte de texto para que ele caiba nas legendas das exibições Principal, Tablet e dispositivo móvel, ou entre visualizações. No entanto, se ainda estiver enfrentando problemas de truncamento de texto, use %opções de tamanho automáticas ou relativas para ajustar o tamanho da legenda e a legenda aumentará automaticamente para acomodar o texto.

Codificação por cores

Os objetos de texto em diferentes exibições dos projetos responsivos possuem codificação por cores. É possível ver diferentes codificações por cores nos limites da área de texto na janela Propriedades. Anteriormente, essa opção era aplicável somente a propriedades de posição.

Em um projeto responsivo, cada exibição de ponto de interrupção tem uma cor diferente. É possível visualizar essas cores na parte superior da visualização do ponto de interrupção. Por exemplo, a cor roxa na imagem abaixo indica a exibição de Desktop.

Agora, o texto criado na exibição de Desktop representa a codificação por cores do azul em torno da borda da legenda de texto, na janela de propriedades. De forma similar, o texto criado na exibição Tablet representa o verde, e o texto da exibição Móvel representa a codificação por cor laranja.