Documentation du logiciel Framer

Adaptée par Nicolas Tilly, enseignant en graphisme interactif à l'École Supérieure d'Art et Design d'Orléans.





Présentations des interactions liées au lexique des gestes tactiles sur mobile et tablette (source : Design Tactile de Josh Clark aux éditions Eyrolles - 2016)

Tap

tap image

"Le tap est le clic de l'univers tactile, l'action universelle permettant d'interagir avec tous les éléments à l'écran. Le tap indique "je veux en savoir plus" ou "je veus activer ceci". Le tap est également la meilleure alternative aux interactions de survol dans un environnement tactile : utilisez un tap pour obtenir un aperçu d'un objet, prévisualiser les informations sans ouvrir une vue détaillée; utiliser un second tap pour l'activer."


Ajoutez deux layers dans votre projet. Le layerA sera votre bouton sur lequel vous ferez un tap, le layerB sera le texte qui s'affichera une fois le tap sur le bouton effectué.

    layerA = new Layer
    x: 205
    y: 302
    backgroundColor: "rgba(0,0,0,1)"

Le layerB est un calque contenant un texte HTML (layer.html). Pour utiliser les propriétés CSS en javascript, voici un lien permettant de trouver les équivalences.

layerB = new Layer
    x: 27
    y: 215
    width: 430
    height: 87
    opacity: 0.00
    backgroundColor: "rgba(123,123,123,0)"

layerB.html = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."

layerB.style =
    "color": "black",
    "fontSize" : "14px",
    "lineHeight": "18px"

Ensuite il faut définir un Event à votre layerA : ici on souhaite donc faire un tap sur notre layerA afin de faire apparaître le texte du layerB. Le layerB a une opacité égale à 0, le tap sur le layerA change ce paramètre et fait passer l'opacité du layerB à 1. Celui-ci devient donc visible.

layerA.onTap (event, layer) ->
    layerB.animate
        properties:
            opacity: 1

Essayer l'exemple en ligne

Télécharger l'exemple



Double tap

tap image

"Le double tap permet de zoomer et de dézoomer. Le double tap trouve peu d'utilisation conventionnelles au-delà du zoom cependant, ce qui le rend idéal pour expérimenter dans d'autres contextes."


Ajoutez un layer dans votre projet. Celui comportera une image qui sera zoomée par l'action du double tap.

layerA = new Layer
    height: 216
    image: "images/image.PNG"
    width: 216
    x: Align.center
    y: Align.center

Ensuite il faut définir un Event à votre layerA. Le double tap sur le layerA fait zoomer l'image à deux fois sa taille.

layerA.onDoubleTap (event, layer) ->
    layerA.animate
        properties:
            width: 432
            height: 432
            y: 186
            x: 89

Essayer l'exemple en ligne

Télécharger l'exemple



Swipe

tap image

"Comme le tap, le swipe (balayage) est devenu si familier que ses usages semblent à la fois évidents et limités : faites glisser votre doigt pour faire défiler la page ou basculer entre dfférentes vues. Mais des usages plus subtils ont fait leur apparition. Le swipe peut révéler des panneaux cachés, par exemple, comme la fonction commune à de nombreuses plateformes qui consiste à faire glisser votre doigt depuis le haut de l'écran pour faire apparaître la barre d'état et les notifications."


Dans cet exemple vous allez ajouter trois layers à votre projet :

Le layerA est le fond coloré de notre projet.

layerA = new Layer
    backgroundColor: "rgba(0,128,255,1)"
    width: 649
    height: 807

Le layerB est le "menu" que nous allons faire descendre du haut de l'écran. AU départ layerB est invisible car il est positionné en dehors du canvas.

layerB = new Layer
    width: 665
    height: 67
    backgroundColor: "rgba(25,25,25,1)"
    x: -16
    y: -67

Enfin, le layerC est une image. La flêche qui nous indique en haut de l'écran l'action à exécuter.

layerC = new Layer
    height: 14
    image: "images/fleche.png"
    width: 50
    x: 300
    y: 3

Ensuite il faut définir un Event à votre layerA : le swipe down qui permet de faire descendre du haut de l'écran le menu. Il faut également en définir un autre à votre layerB : le swipe up qui permet de faire remonter le menu. Ces deux actions animent la flêche qui suit ainsi le mouvement du menu.

layerA.onSwipeDown (event, layer) ->
    layerB.animate
        properties:
            y: 0
    layerC.animate
        properties:
            y: 75
            rotation: -180

layerB.onSwipeUp (event, layer) ->
    layerB.animate
        properties:
            y: -67
    layerC.animate
        properties:
            y: 3
            rotation: 0

Essayer l'exemple en ligne

Télécharger l'exemple



Pression longue

tap image

"Similaire au clic de droite, la pression longue fait apparaitre un menu contextuel contenant des actions associées ou des informations sur l'élément touché. On retrouve la même approche sur toutes les plateformes tactiles, mais les détails peuvent varier. Sur iOS la pression longue est généralement uniquement découverte par les utilisateurs experts ou curieux; mieux vaut donc la traiter comme un raccourci alternatif permettant de consulter un écran détaillé."


Ajoutez deux layers dans votre projet. Le layerA est une forme colorée qui sert de "cible" pour la pression longue.

layerA = new Layer
    width: 324
    height: 244
    x: 125
    y: 198
    borderRadius: 18
    backgroundColor: "rgba(128,0,255,1)"

Le layerB est un texte d'information qui vient de superposé sur la forme colorée lorsque celle-ci subit une pression longue. Au départ celui-ci est invisible avec une opacité égale à 0.

layerB = new Layer
    x: 148
    y: 222
    height: 169
    opacity: 0
    backgroundColor: "rgba(123,123,123,0)"
    width: 256

layerB.html = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>Sed non risus."

layerB.style =
    "color": "white",
    "fontSize" : "24px",
    "lineHeight": "26px"

Ensuite il faut définir un Event à votre layerA. Le début de la pression longue affiche le layerB (opacité égale à 1) puis lorsque la pression longue est relachée, le layerB redevient invisible (opacité égale à 0).

layerA.onLongPressStart (event, layer) ->
    layerB.animate
        properties:
            opacity: 1
            delay: 0


layerA.onLongPressEnd (event, layer) ->
    layerB.animate
        properties:
            opacity: 0

Essayer l'exemple en ligne

Télécharger l'exemple



Pression longue et glissement

tap image

"Sur toutes les plateformes, ce geste déclenche un comportement de glisser-déplacer. Une pression longue sur un élément déplaçable signale que vous avez l'intention de le déplacer, et le glissement permet de l'amener à destination."


Ajoutez deux layers dans votre projet. Le layerA et le layerB seront tous les deux manipulables par une pression longue et un glissement.

layerA = new Layer
    borderRadius: 100
    borderWidth: 5
    borderColor: "rgba(0,0,0,1)"
    opacity: 1.00
    backgroundColor: "rgba(123,123,123,0)"
    x: 383
    y: 23

layerB = new Layer
    borderRadius: 100
    width: 124
    height: 124
    y: 630
    x: 22
    backgroundColor: "rgba(0,128,64,1)"

Le troisème layer constraints servira à contraindre la zone du canvas aux deux autres layers (ce layer fait exactement la même taille que le canvas). Sans ce layer, les layers A et B peuvent "sortir" de la zone du canvas et devenir ainsi impossible à manipuler sans recharger le projet. Essayer cet exemple en ajoutant et en enlevant ce layer de votre projet.

constraints = new Layer
    width: 610
    height: 804
    backgroundColor: "rgba(123,123,123,0)"

Enfin, il faut activer l'event draggable (glissement) pour les calques A et B. Puis on termine par contraindre les deux calques A et B avec le calque constraints.

layerB.draggable.enabled = true
layerB.draggable.constraints = constraints.frame

layerA.draggable.enabled = true
layerA.draggable.constraints = constraints.frame

Essayer l'exemple en ligne

Télécharger l'exemple



Pincement et étirement

tap image

"Ce duo de gestes permet généralement d'agrandir et de rétrécir les images, les cartes et les pages web. C'est une interaction immédiate et satisfaisante qui vous permet d'attraper un objet et de le redimensionner à l'envie.
Cet effet de zoom littéral est complété dans de plus en plus d'applications par une version plus métaphorique appelée zoom sémantique - une convention émergente grâce à son usage qui s'est généralisé dans Windows. Dans ce contexte le zoom sémantique permet de basculer entre deux vues : un gros plan et une vue d'ensemble de l'organisation.
"


Ajoutez un layer dans votre projet. Celui-ci nous servira pour l'interaction de pincement et d'étirement.

layerA = new Layer
    borderRadius: 93
    width: 156
    height: 156
    x: 227
    y: 324
    backgroundColor: "rgba(128,0,64,1)"

Il faut ensuite rendre actif (true) l'interaction de pincement et d'étirement pour le layerA. Pour activer le pincement et l'étirement, utilisez la souris et la touche "alt" de votre clavier en même temps.

layerA.pinchable.enabled = true

Dans cet exemple, l'interaction de rotation associée au pincement est désactivée (false). Cela est facultatif, vous pouvez essayer avec ou sans.

layerA.pinchable.rotate = false

Enfin, vous pouvez ajouter un Event permettant de faire une action lorsque l'étirement est relaché. Ici, le layerA reprend sa taille initiale.

layerA.onPinchEnd ->
    layerA.animate
        scale: 1
        rotation: 0
        options:
            curve: "spring(300,20,0)"

Essayer l'exemple en ligne

Télécharger l'exemple