Pour redimensionner la scène Adobe Edge Animate - nuls

La scène est l'endroit où vous allez placer vos éléments, tels que des images, du texte et des objets dessinés. La scène est une fenêtre HTML en direct, ce qui signifie que ce que vous voyez à l'écran est ce que votre public voit quand il regarde et interagit avec votre composition. Vous pouvez dimensionner la scène de différentes manières:

• Pixels: Adobe Edge Animate CC vous permet de définir la scène de manière à conserver une taille spécifique quelle que soit la taille de la fenêtre du navigateur.

• Pourcentage: Pour ceux qui préfèrent un design web plus réactif.

• Test de conception Web réactive: Vous souhaiterez peut-être modifier la couleur d'arrière-plan de la scène pour tester la réactivité de votre conception.

Dimensionnement de votre scène en fonction des valeurs de pixel

L'une des premières étapes à effectuer est probablement de dimensionner correctement votre scène. Si vous envisagez d'insérer votre animation dans une page Web existante, déterminez d'abord l'espace que vous souhaitez que votre animation occupe sur cette page, puis dimensionnez la scène en conséquence.

Pour redimensionner la scène, cliquez sur les chiffres orange dans la section Stage du panneau Propriétés - dans la colonne extrême gauche en haut de l'écran - comme indiqué. En cliquant sur les numéros de largeur ou de hauteur, vous pouvez saisir les dimensions exactes (en pixels) de votre scène.

Si vous ne voulez pas saisir les nombres, Edge Animate vous propose une méthode alternative pour redimensionner la scène: Placez simplement votre curseur sur l'un des chiffres orange. Lorsque le curseur se transforme en une double flèche (comme indiqué), vous pouvez cliquer et faire glisser pour augmenter ou diminuer la taille de la scène.

Dimensionnement de votre scène en pourcentage de la taille de l'écran

Si vous souhaitez créer une animation qui ne doit pas correspondre à une dimension spécifique, vous devez passer des pixels (px) au pourcentage (%), en cliquant sur la bascule (voir cette figure). C'est une étape dans la création d'un design web réactif. Lorsque vous dimensionnez la scène par pourcentage d'écran et non par pixel, la taille de la scène dépend de la taille de l'élément parent.

Un exemple d'élément parent peut être la fenêtre du navigateur elle-même - si l'animation est une page Web autonome. Toutefois, si l'animation est une partie d'une page Web, l'élément parent peut être un élément div dans lequel l'animation est imbriquée.

Pour que votre scène remplisse toute la fenêtre du navigateur, définissez la largeur et la hauteur de la scène sur 100%, comme indiqué sur cette figure. Pour que votre scène remplisse la moitié de la fenêtre du navigateur, définissez la scène sur 50%; et ainsi de suite, en fonction de la taille de la fenêtre du navigateur que vous souhaitez que votre animation occupe.

Par défaut, l'arrière-plan de la scène est blanc. Par conséquent, vous ne verrez aucune différence dans la scène lorsque vous basculez entre px et%.

Pour tester la différence entre l'utilisation de px et% pour la taille de la scène, remplacez la couleur d'arrière-plan de la scène par autre chose que le blanc, par exemple le rouge. Puis expérimentez avec différents pourcentages et dimensions px pour voir les différents effets.

Pour modifier la couleur d'arrière-plan de la scène (comme indiqué), cliquez sur le carré blanc pour faire apparaître un sélecteur de couleur.

Vous pouvez indiquer à Edge Animate de conserver les mêmes proportions de largeur et de hauteur en cliquant sur l'icône Largeur et hauteur du lien (mise en évidence dans cette figure). Par défaut, l'icône Largeur et hauteur du lien est désactivée. avec cette valeur par défaut, Edge Animate ne conservera pas la largeur (ou la hauteur) dans la même proportion lors du redimensionnement.