Réactifs Layouts

Ce tutoriel montre comment créer des mises en page sensibles à l'aide de JavaScript. Ajouter deux boîtes à la bibliothèque. Faire un rouge et un vert. Ces boîtes sont que des exemples. Des formes ou des objets pourraient être utilisés.

Ajouter les boîtes à l'éditeur.

Organiser les cases, afin qu'ils remplissent les côtés gauche et droite. Laissez une bordure autour d'eux.

C'est maintenant un exemple d'une page web avec un contenu sur les côtés gauche et droit. Il va chercher bien sur un navigateur de bureau ou un téléphone en mode paysage. Malheureusement, cette disposition ne fonctionnera pas bien en mode portrait. Que ce soit, les deux boîtiers doivent être rétrécis petit pour se glisser, ou élargi pour remplir l'écran, et les côtés des boîtes coupent.

Cette situation est où sensibles mises en page sont nécessaires. En mode portrait, une boîte doit se déplacer au-dessus de l'autre. Pour ce faire, nous devons déplacer les boîtes à l'aide de JavaScript. Cela signifie avoir éteint 'Chronologie de l'utilisation' pour les boîtes et paramètre un 'Script ID'.

Afin de déplacer les cases en dehors des limites du film, il faut éteindre clip dans les propriétés du film.

Le meilleur endroit pour organiser les cases est dans le 'Lors du redimensionnement' événement film.

Les fonctions que nous avons besoin sont GetLeft, GetTop, GetWidth et GetHeight. Ces fonctions donnent les limites du navigateur ou du périphérique en utilisant les coordonnées du film. Lorsque la pince est activée, ces valeurs retournent les limites du film. Si vous utilisez le « None » échelle du film, GetLeft et GetTop retournera toujours 0 et peut être ignoré.

Tout d'abord permet d'organiser les deux cases, donc on remplit la partie gauche et l'autre remplit la partie droite.

BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Ensuite, nous allons ajouter une bordure de taille 10. Cette valeur de 10 n'est pas nécessairement en pixels, c'est à la même échelle du film. Utilisation du film « None » adapte tout soit en pixels.

var Border=10;
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);

Enfin, nous allons tester pour voir si la largeur du navigateur ou du périphérique est inférieure à la hauteur. Quand cela arrive, réorganiser les cases verticalement.

var Border=10;
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);
}

Maintenant, vous pouvez le voir, si vous redimensionnez le lecteur, les deux boîtes seront s'arrangent automatiquement. Ces deux boîtes peuvent facilement être remplacés avec d'autres formes et objets. Cet exemple peut être étendu pour gérer les présentations plus complexes.

Création d'une boucle de jeu

Étendre le code HTML

Cette documentation a été traduite de l'anglais, à l'aide d'un traducteur en ligne. Nous nous excusons si vous trouvez des erreurs. Si vous souhaitez nous aider à apporter des corrections. Il y a un éditeur de la traduction en Hippani Animator (dans le menu aide). Nous donner les clés de licence libre à toute personne qui corrige plus de 100 phrases. S'il vous plaît nous contacter pour plus de détails.