Sorry, JAWA user's manual is not yet translated. Right now we just can provide an appproximative auto-translation :

manuel scenarioStudio

cycle de vie des jeux
notes de version
updated : 21/02/24

[tuto] créer une zone de click non rectangulaire

La question revient régulièrement alors voici un tuto pour faire en sorte d'avoir une zone de clic non rectangulaire épousant la forme de l'objet.

Admettons que vous ayez cet objet cliquable partiellement transparent :


Du fait de sa forme biseautée on voir qu'il y a de grands espaces ou le clic ou survol ne devrait pas réagir bien qu'on soit à l'intérieur du rectangle englobant.

En attendant de futures évolutions de la norme HTML qui devraient permettre de désactiver le clic au dessus des pixels transparents, vous pouvez contourner le souci en créant un clipping, c'est à dire une sorte de masque qui va délimiter l'objet (à la fois visuellement et pour les événements souris/touch).

Il est pas possible de créer ce masque directement dans Jawa (j'aimerais bien intégrer un module dans l'éditeur d'image mais c'est assez lourd) mais avec un petit outil du web ça se fait quand même facilement.

Un outil qui fait bien le boulot :

http://www.cssplant.com/clip-path-generator

Charger votre image dans cet outil (en la glissant) puis à l'aide de l'outil de tracé de polygone, entourez votre objet (inutile de coller au pixel près d'autant que cela va aussi détourer l'image)


Une fois la zone refermée, copiez depuis la boite "CSS code" juste en dessous expression clip-path:polygon( ... );

Ne gardez pas le préfixe -webkit- devant clip-path, tel que surligné ici :


De retour dans JAWA, éditez votre objet > onglet "customisation" : et copiez ce clip path dans le champ CSS-custom. Le tour est joué !



PS : les anciens navigateurs ne supportent pas tous bien le clipping.