Edge AnimateResponsive Design
Comment réaliser une animation en responsive Web Design avec Edge Animate
Responsive Design avec Edge Animate
Le Responsive Design consiste à réaliser des animations qui s'adaptent automatiquement à l'écran dans lequel elles sont affichées.Prendre comme exemple un fichier avec une grande image, du texte et un décor de fond d'écran.
- Un fond de couleur qui remplit l'écran
Le fond de couleur par défaut ne rempli pas tous l'écran.
Pour cela, on sélectionne la scène et dans le volet verticale "Stage" à gauche de l'interface Edge, on modifie les unités de largeur et de hauteur de la scène qui sont à 800 x 400 pixels à 100% (du navigateur). - Une image proportionnelle
Après avoir sélectionné une image, dans le panneau des propriété de gauche (position et taille), on modifie l'ancrage de l'image sur l'angle inferieur droit. - Un texte proportionnel
On sélectionne le texte et dans le panneau des propriété de gauche, on bascule uniquement les unités de hauteur qui sont en pixel en pourcentage. - Une image de fond proportionnelle
Après avoir sélectionné l'image de fond, dans le panneau des propriété de gauche (position et taille), on modifie l'ancrage de l'image sur l'angle inferieur gauche. - Une largeur max pour l'image de fond
En haut de l'écran Edge, à droite de la règle, utilisez le "sablier Edge" pour choisir la taille maximum et minimum de votre animation. Ensuite, dans les propriétés de la scène, on cale la valeur minimum de la scène à 700px (par exemple) et maximum à 1000px (on décoche la valeur none).
