Easy-Micro


LOGICIEL Edge Animate
Responsive 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.

  1. 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).
  2. 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.
  3. 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.
  4. 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.
  5. 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).

Pour aller plus loin...


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 15 juin 2019 - Semaine 24 - Sainte Germaine (Demain: Saint Jean-François)
Aujourd'hui, c'est l'anniversaire de Johnny Hallyday (1943-2017), Jean-Philippe Smet est chanteur, compositeur et acteur belge.
Haut de page Easy-Micro