| Conteúdo |
|
| Criando um Loop do jogo | Estendendo o HTML |
Layouts responsivos
Este tutorial demonstra como criar layouts responsivos, usando JavaScript. Adicione duas caixas para a biblioteca. Fazer um vermelho e um verde. Estas caixas são apenas alguns exemplos. Quaisquer objetos ou formas poderiam ser usados.
Adicione as caixas para o editor.
Organize as caixas, então eles enchem os lados esquerdos e direito. Deixe uma borda em torno deles.
Este agora é um exemplo de uma página da web com conteúdo nos lados esquerdos e direito. Vai parecer bem em um navegador da web desktop ou um telefone em modo paisagem. Infelizmente, esse layout não vai funcionar bem no modo retrato. Ou, as duas caixas devem ser encolhidas pequeno para caber, ou expandidos para preencher a tela, e cortaram os lados das caixas.
Esta situação é onde layouts responsivos são necessários. No modo de retrato, uma caixa deve mover-se acima do outro. Para fazer isso, precisamos mover as caixas usando JavaScript. Isso significa desligar 'Use a linha do tempo' para caixas e configuração de uma 'ID do script'.
Para mover as caixas fora dos limites do filme, precisamos desligar clip nas propriedades do filme.
O melhor lugar para organizar as caixas está no 'Em redimensionar' evento de filme.
As funções que precisamos são GetLeft, GetTop, GetWidth e GetHeight. Estas funções dão os limites do navegador da web ou do dispositivo usando as coordenadas do filme. Quando o grampo está ligado, estes valores retornam os limites do filme. Se você estiver usando o 'nenhum' escala de filme, GetLeft e GetTop sempre retornará 0 e pode ser ignorado.
Primeiro vamos organizar as duas caixas, então um preenche o lado esquerdo e o outro preenche o lado direito.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Em seguida, adicionaremos uma fronteira de tamanho 10. Este valor de 10 não é necessariamente em pixels, é na mesma escala do filme. Uso o filme escala 'None' para que tudo seja em pixels.
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
Finalmente nós vai testar para ver se a largura do navegador da web ou dispositivo é menor que a altura. Quando isso acontece, reorganize as caixas na vertical.
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
Agora você pode ver, se você redimensionar o jogador, as duas caixas se arranjam automaticamente. Essas duas caixas podem ser facilmente substituídas com outras formas e objetos. Este exemplo pode ser expandido para lidar com layouts mais complexos.
| Criando um Loop do jogo | Estendendo o HTML |