Como redimensionar Adobe Edge Animate Stage - dummies

O palco é onde você colocará seus elementos, como imagens, texto e objetos desenhados. O Palco é uma janela de HTML ao vivo, o que significa que o que você vê na tela é o que sua audiência vê quando vê e interage com sua composição. Você pode dimensionar o palco de várias maneiras diferentes:

• Pixels: O Adobe Edge Animate CC permite que você configure o Palco para permanecer um tamanho específico, independentemente do tamanho da janela do navegador.

• Porcentagem: Para aqueles que preferem um design web mais responsivo.

• Testando o design web responsivo: Você pode querer mudar a cor de fundo do palco para testar a capacidade de resposta do seu projeto.

Dimensionando seu palco por valores de pixels

Provavelmente, um dos primeiros passos que você deseja tomar é dimensionar seu palco corretamente. Se você planeja inserir sua animação em uma página da Web existente, primeiro determine quanto espaço você deseja que sua animação ocupe nessa página e, em seguida, dimensione o estágio de acordo.

Para redimensionar o palco, clique nos números laranja na seção Estágio do painel Propriedades - na coluna de extrema esquerda, perto da parte superior da tela - como mostrado. Ao clicar nos números de largura ou altura, você pode digitar as dimensões exatas (em pixels) que deseja que o seu palco tenha.

Se você não quiser digitar os números, o Edge Animate oferece um método alternativo para redimensionar o Palco: basta colocar o cursor sobre um dos números laranja. Quando o cursor se transforma em uma seta dupla (como mostrado), você pode clicar e arrastar para aumentar ou diminuir o tamanho do palco.

Dimensionando o seu palco em porcentagem do tamanho da tela

Se você quer criar uma animação que não precisa se ajustar a qualquer dimensão específica, então você deve alternar de pixels (px) para porcentagem (%), clicando no botão alternativo (veja esta figura). Este é um passo para criar um design web responsivo. Quando você dimensiona a porcentagem do estágio por tela, em vez de valores de pixel, o estágio eleva-se de acordo com o tamanho do elemento pai.

Um exemplo de um elemento pai pode ser a própria janela do navegador - se a animação for uma página da Internet autônoma. No entanto, se a animação for uma parte de uma página da Web, o elemento pai pode ser um elemento div dentro do qual a animação está aninhada.

Para que o seu palco preencha toda a janela do navegador, defina a largura ea altura do estágio para 100%, conforme mostrado nesta figura. Para que o seu palco preencha metade da janela do navegador, defina o palco para 50%; e assim por diante, dependendo de quanto da janela do navegador você deseja que sua animação ocupe.

Por padrão, o plano de fundo do palco é branco. Portanto, você não verá nenhuma diferença no palco quando você alternar entre px e%.

Para testar a diferença entre usar px e% para o tamanho do estágio, altere a cor de fundo do palco para algo diferente de branco, como vermelho. Em seguida, experimente diferentes porcentagens e dimensões do px para ver os diferentes efeitos.

Para alterar a cor de fundo do Palco (como mostrado), clique no quadrado branco para exibir um seletor de cores.

Você pode informar o Edge Animate para manter as proporções de largura e altura iguais ao clicar no ícone Largura e altura da ligação (destacado nesta figura). Por padrão, o ícone Largura e altura da ligação está desativado; Com esse padrão em vigor, Edge Animate não manterá a largura (ou altura) na mesma proporção quando você redimensionar.