Designer

Hyperion Designer permet de créer des graphismes Vectoriels, pour VirtualSociety ou au format PNG. Cet outil permet notamment de créer les icones des interractions (action d'objet).

 

I. Lancer Designer

Pour lancer l'outil "Designer" depuis VirtualSociety, cliquez sur le bouton "Outils" de la barre du bas. La fenêtre suivante s'ouvre :

Image

Depuis les outils de développement, vous accédez directement à la fenêtre "Hyperion".
Cliquez sur l'icône "Designer" , vous arrivez alors dans l'éditeur :

Image

II. Les vues

La fenêtre vues (en haut à droite), permet, comme n'importe ou dans VirtualSociety ou Hyperion, d'afficher la vue filaire ou la vue normale. Cette fenêtre est particulièrement utile pour obtenir des alignements parfaits, grâce à la vue filaire.

Image

L'objet édité peut alors être affiché dans les deux modes de vue :

Image

III. Menu principal

Le menu principal est composé de cinq icônes :

  • Nouveau : permet de créer un nouveau document.
  • Ouvrir : permet d'ouvrir un document enregistré, partagé ou un modèle.
  • Enregistrer : pour enregistrer l'objet édité dans votre espace de stockage (en ligne).
  • Exporter : pour utiliser l'élément créé. Il est possible de réaliser un export public (permettant d'utiliser l'objet dans VirtualSociety, dans votre appartement par exemple), ou sous forme de fichier (image PNG, code Hyperion, ...). Notez que vous n'avez pas besoin d'utiliser l'export pour utiliser un fichier dans une application.
  • Quitter : Quitte l'application, ramenant à VirtualSociety (si l'application a été lancée depuis VirtualSociety), ou Hyperion Developers Tools.

 

Image

Lorsque vous ouvrez ou sauvegardez un document, trois emplacements sont disponibles :

  • Mes fichiers (espace personnel)
  • Compatibles : affiche tous les éléments compatibles avec le logiciel utilisé
  • Racine (racine du système, contenant les fichiers de l'utilisateur (vos fichiers), les fichiers de applications chargées, et les modèles de toutes les applications.

La fenêtre export vous propose, ici, d'exporter au format PNG, de faire un export public (pour VirtualSociety), ou en code Hypérion (pouvant être importé via l'arbre d'édition).

 

Image

IV. Création de formes

Le panneau outils vous permet de créer des formes ou choisir certains paramètres. Lorsque vous créez une forme, celle-ci est automatiquement ajoutée au dessin avec les paramètres de base.

Image

Voici la liste des formes disponibles :

  • Rectangle
  • Trait
  • Cercle / Ellipse
  • Polygone
  • Texte
  • Arc

Chaque forme peut être éditée avec un certain nombre de paramètres.

 

A. Editer les dimensions
Lorsque vous sélectionnez un objet, les points de contrôles (carrés blanc) apparaissent. Ces points vous permettent d'éditer les dimensions de l'objet.

Image

La plupart des objets possèdent les mêmes points de contrôles. Les quatre points aux extrémités permettent de modifier la hauteur et la largeur en même temps. Les points "centraux" permettent, quant à eux, d'éditer seulement la largeur ou la hauteur.
La forme "Arc" possède des points de contrôle différent : les deux points carrés permettent de définir les extrémités de l'arc, et le point rond permet d'éditer l'arc.

Image

Vous pouvez déplacer chaque objet avec le curseur, et éditer les dimensions de chaque objet séléctionné. Attention cependant : vous ne pouvez pas déplacer plusieurs objets sélectionnés d'un coup. Pour obtenir ce comportement, utilisez les groupes (voir partie 5.A).

B. Editer la sélection
La fenêtre "Sélection" vous permet d'éditer les paramètres de l'objet (ou des objets) sélectionné(s). Cette fenêtre est composée de panneaux que vous pouvez réduire pour gagner de l'espace. Cette fenêtre n'apparait que si un objet est sélectionné.

Image

Chaque paramètre peut être édité de deux façons :

  • En cliquant sur la valeur et en déplaçant votre curseur (sans relâcher la souris) vers la droite où la gauche, vous pouvez augmenter ou diminuer cette valeur.
  • En double-cliquant sur un paramètre, vous pouvez entrer une valeur et appuyer sur entrer pour valider.

Ces paramètres vous permettent d'affecter des valeurs précises dans le cas où l'édition visuel (en déplaçant l'objet avec la souris) ne suffit pas.

 

Panneau "Position"
Le panneau position vous permet d'éditer la position de la sélection.
Le panneau position vous permet également de changer l'agencement des objets (quels objets doivent être devant/derriere quels objets), avec les boutons "Avancer", "Reculer", "Premier plan" et "Arrière plan".

 

Image

 

 

Panneau "Bords (rectangle)"
Ce panneau vous permet d'obtenir des bords arrondis sur un rectangle. Vous pouvez éditer séparément l'angle de chaque coin.

 

Image

 

C. Editer les couleurs
La couleur de fond et la couleur des traits sont également modifiables via les panneaux. 
Trois remplissages sont disponibles : couleur unie, dégradé linéaire et dégradé radial.
Sélection d'une couleur
Cliquez sur la couleur pour l'éditer. La fenêtre "nuancier" s'ouvre alors.

Image

Vous pouvez choisir une couleur du nuancier et valider. L'échelle de noirs en bas de la fenêtre permet de choisir la transparence de la couleur (0,1 a 1).
Cette fenêtre vous donne également accès a la palette de couleurs prédéfinies :

Image

Dégradé linéaire
Vous pouvez également appliquer un dégradé de deux couleurs. Chaque couleur se choisit comme une couleur unie. Sur l'objet, deux contrôles rond vous permettent d'éditer la direction et la taille du dégradé.

Image

Dégradé radial
La sélection des couleurs du dégradé ne change pas. Les contrôles vous permettent, cette fois, de gérer la taille du dégradé (du cercle d'encombrement), et le centre de chaque couleur.

Image

Traits
Le panneau Bords vous permet d'éditer la couleur de trait si vous en désirez une. L'ensemble des formes de base (textes et combinaisons compris) supportent les traits.

Textes
Dans le cas d'un texte, le panneau vous permet d'éditer la police (parmi les polices de base des systèmes) et la taille du texte

Image

Dans le cas d'un texte de plusieurs mots, la taille de l'objet texte permet de tronquer le texte (forcer le retour à la ligne). Cette taille définit également le masque du texte.

Image

D. Gérer l'alignement avec l'aimant
Lorsque vous déplacez un objet ou un point de contrôle quel qu'il soit, des repères commentés apparaissent en vert pour vous aider à aligner les objets entre-eux.

Image

Ces repères permettent d'aligner chaque objet avec l'ensemble des autres objets. Plusieurs repères apparaissent : par rapport aux positions des objets, aux dimensions, symétries, ...
Vous pouvez à tout moment désactiver les repères commentés en cliquant sur l'icône "aimant" dans la fenêtre Outils.

E. Zoom et déplacement
Le panneau outil possède également trois icônes "zoom+" "zoom-" et "Déplacer". Le zoom est affiché comme titre de la fenêtre outil lorsque vous survolez l'un des icônes de zoom (sous forme de coefficient, ex: 1.3 signifie que toutes les dimensions sont multipliées par 1,3).
Le bouton "Déplacer" ouvre la fenêtre suivante :

Image

Vous pouvez alors cliquez sur les flèches pour déplacer la vue (sans modifier le document), ou sur le bouton central pour revenir à l'état par défaut.

F. Pipette et sceau
Les outils pipette et sceau vous permettent de copier les couleurs d'un objet pour les attribuer a un autre objet. La sélection de l'un de ces outils se manifeste par l'icône de ce dernier a côté du curseur de la souris. L'utilisation de la pipette active automatiquement l'outil sceau (une fois la pipette utilisée). Pour désélectionner l'un de ces outils, cliquez sur le fond.

V. Les groupes et les effets

Vous pouvez sélectionner plusieurs objets en même temps en maintenant le clic enfoncé et en déplaçant la souris.

A. Créer des groupes
Le panneau "Objets sélectionnés" apparait dès qu'au moins un objet est sélectionné.

Image

Les actions "Copier", "Coller" et "Supprimer" sont disponibles avec tous les types de sélection. Avec ensemble d'objets sélectionnés, vous avez également la possibilité de créer un groupe.

Image

B. L'édition des groupes

Avec un groupe, les contrôles changent :

  • Les contrôles des dimensions (les 8 carrés blancs) contrôlent l'échelle de l'objet. Ainsi, l'épaisseur des lignes par exemple sera modifiée aussi par ces contrôles lors de l'agrandissement de l'objet, contrairement au cas d'une forme de base.
  • Quatre contrôles noirs apparaissent également. Ceux-ci permettent de pencher l'objet (skew) selon un axe.
Image
  • Un contrôle circulaire apparait également en haut à droite du groupe. Ce contrôle vous permet de gérer la rotation.
Image

  Astuce : L'ensemble de ces modifications peuvent également être effectuées depuis l'éditeur de sélection (fenêtre Sélection), via les paramètres du panneau "Transformations".

C. Ajouter des effets
Les groupes prennent également en charge les effets. Pour éditer les effets d'un groupe, cliquez sur le bouton "Effets" du panneau avancé, l'éditeur d'effets apparait alors.

Image

La partie gauche de la fenêtre vous permet d'activer ou désactiver les effets, tandis que la partie droite permet d'éditer les effets actif.
  Note : L'effet "masque" est obligatoire pour activer un autre effet, à l'exception des ombres.

Image

Les effets suivant sont disponibles :

  • Flou : affecte un flou au groupe. Cet effet peut être paramètre en intensité selon les deux axes x et y.
  • Ombre : ajoute une ombre. Vous pouvez choisir la couleur de l'ombre, le flou, et le décalage en x et y.
  • Filtre de couleur : ce filtre permet d'ajouter un offset aux composantes des couleurs (Rouge, Vert, Bleu et Alpha (transparence)). Vous pouvez également ajouter un multiplicateur.
  • Masque : masque une partie de l'objet. Les paramètres vous permettent d'éditer le rectangle de masquage (position en x/y, hauteur et largeur). Cet effet permet de cacher une partie du groupe. Il est nécessaire à l'utilisation des autres effets (ceux-ci ne reposant pas sur des formes vectorielles). Cet effet permet également un gain de performances lors du traçage des graphismes (évite de retracer l'ensemble des formes à chaque rendu). Le gain du masque n'est pas toujours intéressant dans la mesure ou le contenu des fenêtres de VirtualSociety/Hyperion est automatiquement mis en cache par défaut.
  • Modifier les couleurs : ce filtre vous permet de modifier la luminosité, le contraste, la saturation et la teinte de votre dessin.

D. Désassembler un groupe
Vous pouvez à tout moment désassembler un groupe avec le bouton "Dissocier".
Attention : les effets et transformations du groupe seront alors perdus. Si le groupe a été déplacé, le changement de place sera, lui, conservé.

VI. Combinaisons d'objets

Lorsque les formes de base ne suffisent pas, vous avez la possibilité de créer une nouvelle forme (appelée "combinaison"), à l'aide de traits et d'arcs.

A. Créer une combinaison
Commencez par dessiner votre forme a l'aide de traits et/où d'arcs. Sélectionnez alors l'ensemble de vos objets.

Image

Pour créer une forme de combinaison, utilisez alors le bouton "Combiner".
  Note : La couleur de traits et arcs avant la combinaison n'a aucune importance.
Voici le résultat obtenu pour l'exemple précédent (après changement de couleurs et ajout d'un cercle pour le visage).

Image

B. Règles à suivre
Il est important de suivre certaines règles pour créer une combinaison :

  1. Il est impératif que la forme soit fermée ! Chaque trait ou arc doit commencer et se terminer à l'endroit ou un autre trait/arc commence.
  2. L'utilisation de l'aimant et de repères commentés est fortement conseillée pour éviter les "trous" dans la forme créée.
  3. Si l'algorithme de combinaison échoue, il essaiera de faire des approximations pour "ignorer" des décalages légers. Evitez cependant de trop compter sur cette protection.
  4. Lorsque l'algorithme échoue, il est fortement déconseillé de garder l'éventuelle forme créée, même si elle est proche du résultat désiré.
  5. Il est très fortement conseillé d'enregistrer votre travail AVANT d'utiliser l'option "Combiner". En effet, si la combinaison échoue, vous pourrez alors "réparer" vos objets avant de réutiliser la combinaison, et vous éviterez ainsi une importante perte de temps.

C. Cas d'un échec
Si l'algorithme de combinaison échoue, une fenêtre s'ouvrira alors pour vous informer des étapes qui n'ont pas fonctionné.

Image

Si cette fenêtre s'ouvre, récupérer votre sauvegarde réalisée juste avant la combinaison pour corriger les erreurs. Dans les logs, vous pouvez lire l'ensemble des actions tentées par l'algorithme.

Voici le fonctionnement :

  1. Chaque trait/arc est ajouté sous forme de quatre coordonnées (x,y du point de départ, x,y du point d'arrivée, les points de contrôles d'arc sont ignorés).
  2. L'algorithme prend le premier trait, et compare les coordonnées de ce trait aux coordonnées de tous les autres traits pour chercher le suivant. Un lien est créé dès qu'un trait correspondant est trouvé (si les coordonnées correspondent à la fin et non au début d'un trait, le lien est dit "inversé").
  3. Une fois tous les traits/arcs traités, si l'on est revenu au point de départ, la forme est cohérente et la combinaison est créée sans affichage des logs.
  4. Sinon, l'algorithme affiche les logs. Celui-ci s'arrête dès qu'un trait ne dispose d'aucun lien.

Les combinaisons peuvent être éditées comme n'importe quelle forme de base (couleurs, dégradés, traits, ...).

VII. Clavier

Lorsqu'un ou plusieurs objets sont séléctionnés, vous pouvez utiliser les touches du clavier pour effectuer les modifications suivantes :

Touches Action associée
  Déplacer la séléction de 1px à gauche
  Déplacer la séléction de 1px à droite
  Déplacer la séléction de 1px en haut
  Déplacer la séléction de 1px en bas
SHIFT +   Déplacer la séléction de 10px à gauche
SHIFT +   Déplacer la séléction de 10px à droite
SHIFT +   Déplacer la séléction de 10px en haut
SHIFT +   Déplacer la séléction de 10px en bas
ALT +   Copier et déplacer la copie de 10px à gauche
ALT +   Copier et déplacer la copie de 10px à droite
ALT +   Copier et déplacer la copie de 10px en haut
ALT +   Copier et déplacer la copie de 10px en bas

 

  Remarques et problèmes : Si vous rencontrer un problème technique ou avez des suggestions de mises à jour, n'hésitez pas à en faire part en commentaire !

2 commentaires

 

ELISE a commenté
c'est quant con peut i joué
Il y a 1 an
ELISE a commenté
c'est quant con peut i joué
Il y a 1 an