Feche o navegador e volte para o Adobe Muse.
Última atualização em
Observação:
O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a página de Perguntas frequentes sobre o fim de serviço do Adobe Muse.
Aprimorado no Adobe Muse CC 2015.1 | fevereiro de 2016
Você pode deixar o design mais interessante e atrativo aplicando transições de estado a objetos diferentes na página da web. Você também pode definir o atraso, a duração e as opções de tempo para cada transição de estado em cada objeto.
As alterações de Chanfro e Brilho ao longo dos estados são suportadas na transição do estado.
Noções básicas sobre os diferentes estados de objetos
O estado de um objeto determina sua aparência quando um usuário interage com ele. Essas interações podem ser quando o mouse é passado por cima de um item (também chamado de rolagem), ao clicar etc. A interação com um Objeto ocorre quando há transição do estado padrão ou normal para outro estado. Por isso, o Adobe Muse adiciona transições suaves para tais interações.
No Adobe Muse, você pode aplicar Estados a vários tipos de objetos, incluindo texto, contêineres de widget (de todos os tipos de widgets), imagens, hiperlinks, botões etc. Os estados podem assumir estilos gráficos, estilos de parágrafo, estilos de caracteres etc.
Quais são os diferentes estados para um objeto no Adobe Muse?
O Adobe Muse fornece os seguintes estados, permitindo estilos e alterações na aparência de um objeto com base na interação do usuário.
- Normal: o estado Normal determina a aparência padrão de um objeto quando a página da web for carregada. Isso permite que você defina o estado do objeto quando não houver interação. Um objeto transita do estado Normal para outros estados.
- Pressionamento do botão do mouse: o estado Pressionamento do botão do mouse determina a aparência de um objeto quando ele é clicado e não liberado.
- Rolagem: o estado de rolagem permite alterar a aparência de um objeto quando você passar o mouse sobre o objeto. Usar o estado Em cima é uma das maneiras mais fáceis de diferenciar um objeto interativo de um não interativo em uma página da Web.
- Ativo: o estado Ativo define a aparência de um objeto quando ele está Ativo e já foi clicado. Por exemplo, quando um botão é clicado ou um menu é selecionado.
Quando um objeto transita para o estado Ativo, ele indica que o objeto está em uso. Os estados ativos também podem ser definidos para todos os tipos de objetos, incluindo hiperlinks.
Atribuir estados para objetos
Todos os objetos recebem os quatro estados, por padrão. Entretanto, o Adobe Muse permite personalizar cada um desses estados separadamente usando o painel Estados.
Observação:
Ao trabalhar com Estados, é importante controlar as seleções usando o Indicador de seleção. Isso porque o Adobe Muse permite editar o estado Normal de um objeto, por padrão. Isso significa que mesmo editando o estado Ativo do objeto A, ao selecionar o objeto B e depois o objeto A novamente, ele assume o estado Normal. Portanto, é importante sempre selecionar explicitamente o Estado que você deseja editar no painel Estados antes de criar o estilo do objeto.
Por padrão, as edições feitas em um objeto são salvas com o estado Normal. Entretanto, o Muse permite alternar para um estado diferente usando o painel Estados, e criar o estilo do objeto para personalizar ainda mais um estado. Você pode se concentrar no comportamento do objeto para cada tipo de interação separadamente, editando cada um dos estados.
Para personalizar ou editar o estado de um objeto, faça o seguinte:
- Abra o painel Estados clicando em Janela > Estados.
- Selecione o objeto cujo estado você deseja editar.
- Selecione o Estado que deseja editar e continue a criar o estilo do objeto.
- No painel Estados, selecione Transição e escolha a opção Esmaecimento. Defina as opções Atraso, Duração e Velocidade para a transição. Quando você selecionar Transição, ocorre a transição do objeto de um estado para outro conforme as suas configurações.
Atribuir estados para widgets e contêineres de widgets
-
-
Clique no widget uma vez para selecionar o menu inteiro. Clique no botão de alimentos novamente, para selecionar o item de menu alimentos. Se você clicar acidentalmente uma terceira vez e o Indicador de seleção exibir a palavra Rótulo, pressione Escape mais uma vez para saltar um nível na hierarquia, para que o termo Item de menu seja exibido.
Como a opção Edição em conjunto está ativada no painel Opções, as alterações feitas à aparência deste item de menu alimentos são aplicadas aos outros botões no widget de Menu horizontal. Isso torna a edição mais rápida. A menos que um design exija a aplicação de um estilo diferente a cada botão, mantenha a configuração padrão de Edição em conjunto ativada.
-
Abra o painel Estados selecionando sua guia ou escolhendo Janela > Estados.
Esse painel permite editar as várias maneiras de exibição do gráfico do botão, dependendo da atividade do cursor do visitante. Observe que existem várias caixas cinza que definem a aparência de cada estado.
Ao visualizar o site, você observa que o estado Normal indica a aparência do menu quando a página é carregada pela primeira vez, quando o cursor do visitante não está interagindo com o menu. Se o visitante passa o cursor sobre um botão, os estilos aplicados ao estado de Rolagem serão exibidos. Se o visitante pressionar o botão, os estilos aplicados ao estado Mouse pressionado serão mostrados. E finalmente, se o visitante estiver nessa página atual do site (por exemplo, se tiver clicado no item de menu sobre e ainda estiver exibindo a página sobre), o botão fica da maneira que você criou no estado Ativo. Esse último estado é opcional, mas é útil em alguns casos - os visitantes podem visualizar rapidamente qual página estão exibindo no momento.
-
No painel Estados, clique em cada item na lista: Normal, Rolagem, Pressionamento do botão do mouse e Ativo. Observe que, à medida que você clicar em cada estado no painel, o widget Menu na página será atualizado para exibir a aparência padrão do estado.
-
Clique no estado Normal novamente. Quando o item de menu Home estiver selecionado, use a Amostra de cor de preenchimento para escolher uma cor completamente diferente, como vermelho. Quando você definir outra cor de preenchimento, todos os itens de menu atualizarão seu estado Normal, pois a opção Edição em conjunto estará ativada.
Quando você atualizar a cor de preenchimento para um dos estados de botão, os outros serão atualizados automaticamente quando a opção Edição em conjunto estiver ativada. -
Selecione a Transição e selecione a opção Esmaecimento. A transição do objeto de um estado para outro aparece ou desaparece gradualmente, conforme suas configurações.
Você pode definir as seguintes opções quando escolhe a opção da transição de um estado para outro:
Atraso: o tempo de atraso de um estado para outro, em segundos.
Duração: a duração da transição.
Velocidade: nesta opção, você pode tornar a transição Linear ou Facilitar a transição para o próximo estado. Você também pode escolher entre as opções de Facilitar entrada, Facilitar saída ou Facilita entrada/saída. A transição do objeto facilita a entrada ou a saída, de acordo com as suas configurações.
-
Escolha Arquivo > Visualizar site no navegador novamente e verifique se você personalizou o estado Normal do botão; quando o menu for carregado pela primeira vez, todos os botões, exceto aquele que descreve a página atual, estarão em vermelho agora. Conforme você passa o mouse sobre cada botão, a cor de cinza de Rolagem padrão é exibida, criando um efeito de rolagem.
-
Neste exemplo, selecione cada um dos estados no painel Estados (ou selecione cada estado usando o menu Estados ao lado do Indicador de seleção no Painel de controle) e defina a Cor de preenchimento como nenhuma (a amostra de cor branca com a linha diagonal vermelha). Essa configuração remove, efetivamente, os botões de itens de menu de fundo da visualização, para que os botões de menu fiquem transparentes e o design de fundo apareça.
No momento em que este texto foi escrito, o contêiner externo do widget de Menu horizontal era transparente por padrão. Entretanto, se desejar, use o Seletor de cor de preenchimento para definir a cor de preenchimento, assim como contêineres de botão do item de menu. Posteriormente, quando você criar seus próprios sites, poderá fazer experiências com a definição de uma cor de preenchimento para todo o widget e depois o ajuste de uma cor de preenchimento diferente para contêineres de botão. Você também pode tentar adicionar uma imagem de fundo ao criar botões.
Fazer logon em sua conta