Sommaire
Catégorie Effets
Cette catégorie regroupe les propriétés relatives à la disposition de l’acteur.
Bulle d’aide
Cette propriété permet de définir une bulle d’aide lors du survol de l’acteur avec la souris.
Le texte renseigné dans le champ de la bulle d’aide s’affiche lorsque l’acteur est survolé avec la souris.
Chemin d’accès depuis l’acteur
properties.tooltip⚡ Doc Script API
Angle de rotation
Cette propriété permet de définir une rotation de l’acteur sur lui même.
La valeur attendue est un nombre positif OU négatif.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Indication :
- Rotation inversée : 180° / -180°.
- Rotation perpendiculaire : 90° / -90°.
Pour vous aider : La propriété définie la valeur de la fonction ‘rotate()’ en CSS dont la documentation est disponible à cette adresse.
Chemin d’accès depuis l’acteur
properties.rotate⚡ Doc Script API
Echelle
Cette propriété permet de définir de modifier la taille de l’acteur.
La valeur attendue est un nombre positif OU négatif. Lorsque le nom est compris dans l’intervalle [-1,1], l’élément est réduit. Lorsque la valeur est négative, l’élément est inversé par symétrie centrale.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Pour vous aider : La propriété définie la valeur de la fonction ‘scale()’ en CSS dont la documentation est disponible à cette adresse.
⚠️ ATTENTION
Il n’est pas possible de renseigner deux valeurs comme montré dans la documentation CSS.
Chemin d’accès depuis l’acteur
properties.scaling⚡ Doc Script API
Translation
Cette propriété permet de déplacer l’élément sur un axe horizontal (x).
La valeur attendue est un nombre positif OU négatif.
L’unité de taille peut être soit définie directement lors de la saisie soit définie grâce à l’aide située dans sur le bouton des réglages.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Pour l’axe X : Lorsque la valeur est négative, l’élément se translate vers la gauche et vers la droite lorsque la valeur est positive.
Pour vous aider : La propriété définie la valeur de la fonction ‘translate()’ en CSS dont la documentation est disponible à cette adresse.
Chemin d’accès depuis l’acteur
properties.translateX⚡ Doc Script API
Translation
Cette propriété permet de déplacer l’élément sur un axe vertical (y).
La valeur attendue est un nombre positif OU négatif.
L’unité de taille peut être soit définie directement lors de la saisie soit définie grâce à l’aide située dans sur le bouton des réglages.
Dans l’inspecteur, le champ de saisie agit également comme un slider, permettant de changer la valeur en faisant glisser la souris vers la droite pour augmenter la valeur et vers la gauche pour diminuer la valeur.
Pour l’axe Y : Lorsque la valeur est négative, l’élément se translate vers le haut et vers le bas lorsque la valeur est positive.
Pour vous aider : La propriété définie la valeur de la fonction ‘translate()’ en CSS dont la documentation est disponible à cette adresse.
Chemin d’accès depuis l’acteur
properties.translateY⚡ Doc Script API
Z-index
Cette propriété permet d’agencer l’affichage des acteurs en leur donnant un indice.
La valeur attendue est un nombre entier positif OU négatif.
Lorsque deux éléments rentre en collision ou se chevauche, cette propriété permettra d’afficher l’élément qui possède la valeur ‘z-index’ la plus haute.
Il est donc nécessaire d’agencer les éléments afin de donner une valeur z-index plus hautes aux éléments de premier plan et plus faible aux éléments de second plan.
Pour vous aider : La documentation concernant les z-index en CSS peut être trouvée à cette adresse.
Chemin d’accès depuis l’acteur
properties.zIndex⚡ Doc Script API
Transition
Cette propriété permet de définir la transition entre deux états d’un élément.
La valeur attendue respecte le format suivant : propriété temps.
Pour vous aider : La documentation concernant les transitions en CSS peut être trouvée à cette adresse.
Chemin d’accès depuis l’acteur
properties.transition⚡ Doc Script API
Animation
Cette propriété permet de définir des animations CSS sur l’acteur.
Pour déclarer une animation sur un acteur, il est nécessaire en premier lieu que l’animation CSS utilisée soit définie.
Pour cela, il est possible :
- d’utiliser une animation embarquée dans de CSS du runtime de Synapps (voir outils CSS)
- de definir l’animation dans une inclusion CSS (voir les inclusions)
- ou bien de créer un
Acteur HTMLqui contiendra la défintion de l’animation.
Exemple avec un Acteur HTML.
Le contenu de cet Acteur HTML doit être comme suit :
<style>
@keyframes myAnimationName {
instructions de l'animation
}
</style>
Cela permet ainsi de définir une animation qui a pour nom myAnimationName (à changer).
Cette animation pourra par la suite être utilisée par tout autre acteur grâce à son nom de la manière suivante :
Pour vous aider : La documentation concernant les animations en CSS peut être trouvée à cette adresse.
Chemin d’accès depuis l’acteur
properties.animation⚡ Doc Script API
Curseurs
Cette propriété permet de définir un curseur spécifique lors du survol de l’élément.
Pour vous aider : Nous avons ajouté une aide à la saisie, vous y trouverez les curseurs les plus utilisés.
Pour y acceder, il suffit de cliquer ici : ↓ en rouge
Puis vous verrez apparaitre le pop-up suivant ↓
La documentation concernant les curseurs en CSS ainsi que la liste de tous les curseurs disponibles peut être trouvée à cette adresse.
Chemin d’accès depuis l’acteur
properties.cursor⚡ Doc Script API
Filtre
Cette propriété permet d’ajouter un filtre graphique à l’élément.
La valeur attendue est la propriété avec une unité entre parenthèse précisant l’intensité du changement.
Image originale :
Image avec le filtre ‘blur(5px)’ :
Pour vous aider : La documentation concernant les filtres en CSS ainsi que la liste et l’utilisation des différents filtres peut être trouvée à cette adresse.
Chemin d’accès depuis l’acteur
properties.filter⚡ Doc Script API
