Sommaire

L'interface du studio

Bienvenue dans le studio ! Cette interface vous permet de créer vos écrans et de rajouter de l'interactivité très simplement. Ajoutez votre contenu et utilisez nos composants pour réaliser des effets bluffants... sans aucune ligne de code !

Pour ouvrir le studio, créez un nouveau projet et ouvrez la fenêtre depuis votre espace personnel :

L'interface a été conçue pour être intuitive et les habitués des logiciels de création graphique (Illustrator, InDesign, Photoshop…) trouveront d'autant plus facilement leurs repères.

Des fenêtres indépendantes affichent les bonnes informations au bon moment. Vous pouvez les déplacer et en changer la taille : personnalisez l'espace de travail selon vos envies !

1. La zone de travail

L'espace central correspond à la zone visible, votre zone de création. Lors de la création de votre projet, vous pouvez personnaliser le ratio et choisir l'orientation en fonction du support de consultation (tablette, smartphone ou desktop).

Vous pouvez vous déplacer et zoomer facilement à l’aide des outils situés en bas à gauche de la zone de travail (outil main et zoom +/-).

2. Les écrans

a. La notion d'écran

L’écran est le support de base de votre application : il se décline en différents états, c’est-à-dire en différentes dispositions. Sur la gauche se trouve la fenêtre qui regroupe tous les écrans. Initialement, votre projet est composé d’un écran, décliné en un état.

Le bouton + AJOUTER ECRAN  vous permet rajouter de nouveaux écrans. Si vous sélectionnez un état, ce bouton devient + AJOUTER ETAT ... pour ajouter un nouvel état !

b. Les avant et arrière-plans

En cliquant sur ECRANS, vous pouvez accéder aux avant-plans et aux arrière-plans. Ils s’éditent comme des états classiques et se placent au-dessus et en-dessous de vos écrans courants.

3. Les outils de création

Dans le menu du haut, ces quatre icônes vous permettent d’ajouter différents types de contenu.

a. Le texte

En cliquant sur l’icône Textes, un bloc de texte apparaît au centre de votre écran. Pour éditer son contenu, il vous suffit de double-cliquer dessus ou de cliquer sur MODIFIER LE TEXTE dans la fenêtre Propriétés. Cette fenêtre vous donne accès à de nombreuses fonctionnalités classiques d’édition de texte : police, taille, interlignage, couleur, alignement…

b. Les images

Après avoir inséré une image, vous pouvez modifier la source, lui attribuer une bordure ou arrondir ses angles dans la fenêtre Propriétés. En cliquant sur AJOUTER UN MASQUE, vous pouvez cacher une partie de votre image avec un type de forme prédéfini (carré, rond, bulle, triangle, étoile…).

c. Les formes

Plusieurs formes standards sont disponibles pour vos réalisations. Vous pouvez changer la couleur et modifier la bordure dans la fenêtre Propriétés.

d. Les composants

Bienvenue dans la caverne d’Ali Baba ! Découvrez les composants, des modules prédéfinis permettant d'intégrer des effets sympas au sein de votre projet.

Un conseil : prenez le temps de découvrir chaque composant et de comprendre comment les détourner pour votre propre usage. Faites-vous aider de chaque article correspondant.

LA LISTE DES COMPOSANTS :

4. Les Interactivités

C'est la fenêtre magique ! En cliquant sur + AJOUTER ACTION, vous choisissez un déclencheur et une action interactive. Patience, vous serez bientôt un expert de la question !

5. Les Propriétés

La fenêtre Propriétés vous donne accès (comme son nom l'indique) aux fonctionnalités spécifiques de l'objet sélectionné. Quand aucun objet n'est sélectionné, elle permet d'accéder aux Propriétés de l'état. Elle s’affiche automatiquement à l'insertion d'un élément.

Une propriété commune à tous les objets est l’Interaction utilisateur : en la décochant, vous empêchez toute possibilité pour votre utilisateur de lancer une interaction que vous auriez paramétré sur (ou à l'intérieur de) cet objet.

6. Médias

La fenêtre Médias vous permet d’accéder de partout à tous les contenus que vous avez importés pour votre projet : images, vidéos et audio. Retrouvez-les facilement avec le moteur de recherche intégré, filtrez les, comptabilisez le nombre d’utilisations et accédez aux informations du fichier.

Glissez-les simplement à partir de Médias sur votre écran pour les insérer dans votre projet. En effet, ce n’est pas parce que vos objets sont dans Médias qu’ils sont considérés comme intégrés dans votre projet ! Pour savoir s’ils sont bien incorporés, ils doivent être situés dans la fenêtre Liste des Objets, située en bas à gauche de votre écran.

Le conseil gagnant : pensez bien à renommer tous vos fichiers pour les retrouver rapidement ! Vous risquez de vous retrouver avec un très grand nombre à la fin de votre projet !

7. La Gestion de Projet

Dans cette fenêtre, vous pouvez :

  • gérer plusieurs langues dans votre projet ;
  • activer la gestion responsive de votre projet ;
  • définir un mode de navigation magazine : la transition entre écrans est alors automatiquement horizontale. Vous choisissez le nombre de doigts nécessaires au passage d’un écran à un autre.

8. La barre d’outils

A la sélection d'un objet, cette barre d’outils vous permet de retrouver toutes les fonctionnalités communes de mise en page.

Vous pouvez :

  • Supprimer vos objets
  • Annuler / Rétablir
  • Changer l’opacité des objets
  • Avancer ou reculer un objet
  • Placer devant / derrière
  • Changer les coordonnées
  • Ajuster à gauche / centrer / ajuster à droite
  • Ajuster en haut / au milieu / en bas
  • Changer les dimensions
  • Adapter à gauche / à droite / en haut / en bas
  • Changer la rotation

9. Le fil d’Ariane

Sous la barre d’outils, le fil d’Ariane est votre guide ultime : il vous aide à vous repérer dans votre projet, notamment lorsque vous vous imbriquez à l'intérieur de plusieurs niveaux (dans un composant, qui est dans un composant par exemple).

10. La Liste des Objets

En bas à gauche, la Liste des Objets regroupe tous les éléments, visibles ou non, qui se trouvent au sein de votre état courant. Les composants graphiques se situent sur le haut de la liste et sont séparés des composants systèmes par une barre dans la liste. Vous pouvez choisir de verrouiller ou de cacher certains éléments (qui seront également cachés sur l’aperçu et PandaViewer). Lorsque vous attribuez une action à un objet, un éclair apparaît à côté de celui-ci.

Vous pouvez éditer les objets en double-cliquant dessus.

A noter : l'ordre des objets graphiques dans la liste indique également leur rangement en termes de profondeur : les objets du haut sont situés en avant par rapport aux objets du dessous.

11. Sauvegarde et aperçu

Sauvegardez régulièrement votre projet et visualisez-le soit via l’icône Aperçu, soit via l'application PandaViewer.

En cliquant sur la flèche à droite du logo, vous pouvez gérer votre espace de travail : ouvrir/fermer/créer un projet.

Tout en bas à droite, vous découvrez la fenêtre pour "chatter avec un membre de l’équipe ! On sera ravis d'échanger avec vous ;)

L’article a été long mais le studio n’a (presque) plus de secret pour vous ! :-)