Dans cet article nous vous présentons les blocs dynamiques (nous les appellerons box) et leur utilisation:
Présentation générale
L'éditeur de box
Propriétés
Gestion du responsive
Créer une box directement à partir d'une page de projet
Créer des interactions entre les éléments d'une box et des éléments externes - via les classes d'éléments
Présentation
La box est un nouveau module de l’éditeur RacontR.
Il s’agit de d’un composant dynamique que vous allez créer et configurer au sein d’un projet, séparément des pages de ce projet. Vous pourrez ensuite insérer votre box sur n’importe quelle page de votre projet, de la même manière qu’un calque ou un module classique RacontR.
Pour simplifier, la box est une "mini" page que vous allez insérer dans des pages de votre projet. Elle a son éditeur propre, qui fonctionne d’une manière générale comme l’éditeur de page classique.
Les avantages de la box :
Vous pouvez créer une seule fois des box que vous pourrez ensuite importer sur n'importe quelle page d'un projet, sans avoir à reproduire une même composition pour chaque page (haut ou pied de page, par exemple). Le gain de temps est considérable.
Vous pouvez aussi grouper des éléments d'une page au sein d'une box lorsque vous souhaitez animer ce groupe d'éléments ou lui appliquer une action groupée
L’éditeur de box
Vous accédez à la liste des box et à leur éditeur depuis la page scénario de votre projet, second onglet du menu haut-gauche
Notez que vous pouvez accéder aussi directement à une box et son éditeur en faisant défiler la liste des pages depuis l'onglet de navigation entre pages (menu haut-droit).
L’éditeur est identique:
possibilité d’importer des objets
accès aux propriétés de chaque objet et possibilité de les animer avec les transitions d’apparition sur la page
menu d’interactions entre les éléments de la page de box
possibilité de lier des éléments de la page à des pages du projet ou des urls extérieurs
propriétés de la box
liste des calques
zoom
La seule différence avec l’éditeur de page classique, c’est l’absence de timeline dans l’éditeur de box. En revanche l’ensemble de la box pourra être utilisé dans la timeline des pages dans lesquelles elle sera importée - comme n’importe quel élément.
Zoom sur les propriétés
Les propriétés générales de la box (menu haut gauche) sont simplifiées :
le nom
les dimensions
le facteur parallaxe
duplication (comme pour une page classique, dupliquer une box duplique ses éléments ainsi que l'ensemble des interactions qui y sont configurées - en remplaçant directement un média qui y figure à partir de son propre panneau de propriétés vous remplacez le média tout en conservant les configurations du média d'origine)
Différences avec les propriétés d’une page classique :
l’absence d’option de sens de lecture dans les propriétés - le sens de lecture des blocs textes de la box s’ajuste à celui de la page
pas d’icône “home” puisqu’une box seule ne peut être mise en page d’accueil de projet
pas d’icône de publication puisqu’une box ne peut être publiée que si elle fait partie d’une page
Créer une box en groupant des éléments d'une page
Vous pouvez créer une box sans passer par la page scénario:
Sélectionnez les différents calques à grouper en faisant shift/maj + clic sur les éléments ou bien en cliquant puis glissant le curseur sur l'ensemble des calques à grouper
Faites un clic-droit et dans la liste des options qui s'affiche vous avez "convert selected elements into dynamic box", qui convertit les éléments sélectionnés en box.
Vos éléments sont désormais convertis en box, vous pouvez ensuite éditer la box en entrant dans son éditeur (nouveau clic droit sur la box et "edit dynamic box")
Si vous souhaitez dégrouper les éléments de la box, il vous suffit d'aller dans l'éditeur de la box en question puis copier les éléments pour les coller sur votre page projet dans leur configuration d'origine.
Vous pouvez également simplement faire un ctrl+Z (cmd+Z sur Mac) pour annuler l'opération, sous réserver de n'avoir pas quitté la page entre-temps (comme pour toute opération d'annulation par ctrl+Z/cmd+Z par ailleurs)
Gestion du responsive pour les blocs dynamiques
Les blocs dynamiques doivent être approchés comme des pages pour ce qui concerne le responsive (adaptation aux différents formats d'écrans).
Comme pour une page classique, il est recommandé créer les versions adaptées des blocs dynamiques (desktop, tablette, mobile) afin de s'assurer que leur format est optimisé pour toutes les versions des pages sur lesquelles ils apparaissent.
Pour cela, vous utiliserez l'outil responsive dans le menu en haut à droite (icône en forme d'écran) et appliquerez la même logique que pour une page classique lors de la création des différentes versions.
Interactions box/page - classe d’éléments
Vous pouvez créer des interactions entre des éléments hors-box et des éléments dans la box.
Pour créer une interaction entre un élément de la page et un élément de la box, il faut utiliser les classes des éléments concernés.
Par exemple, vous avez une icône placée sur votre page. Vous voulez qu’un clic sur l’icône crée une action d’opacité sur une image placée dans une box. Voici la procédure à suivre :
allez sur votre éditeur de box et sélectionnez l’image
dans le panneau de ses propriétés vous avez sous son nom une deuxième ligne “element class”. C’est là que vous lui appliquez une classe
appliquez-lui l’action d’opacité voulue (sur l'élément lui-même, donc) avec les paramètres de votre choix
retournez sur la page et sélectionnez votre bouton
choisissez un type d’action puis dans le panneau de configuration qui s’ouvre sélectionnez “trigger by class” dans la colonne élément, configurez la colonne "Parameter" selon le type d’action que vous avez configurée sur l’image
dans la colonne "Value" vous inscrivez le nom de la classe d’élément visée
Notes:
cette opération fonctionne dans les deux sens : vous pouvez déclencher une action sur un objet de la page à partir d’un élément de la box
vous pouvez créer des actions groupées sur plusieurs éléments en utilisant cette fonctionnalité d’action par classe et en leur attribuant la même classe
Les classes d’éléments
Une classe de calque peut être un nombre, un nom, un signe. Son intitulé doit être groupé, sans espace (voir plus bas)
Si vous choisissez de grouper des actions sur plusieurs éléments simultanément, vous devez être attentif à leur donner la même classe.
Vous pouvez appliquer plusieurs classes à un même élément en ajoutant un espace entre chaque nom de classe
vous pouvez déclencher des actions sur les classes d’éléments (voir l’exemple plus haut) et ainsi déclencher l’ensemble des actions prévues sur les éléments d’une même classe