L'App Institutionnelle

Même les rapports et les documents financiers ont le droit à leur dose d’interactivité ! Réalisez des graphiques animés et mettez en forme votre contenu pour une consultation 100% adaptée à la tablette.

Cette application est construite en 3 écrans, correspondant aux différentes parties. Le menu a été créé dans l’avant-plan pour nous permettre de réaliser cet effet d’ouverture.

 

1. L'avant-plan et l'arrière-plan

Ne vous trompez pas : l’état 1 de l’écran 1 semble vide mais un avant-plan lui a été attribué. C’est ici que vous y trouverez le menu.

L’avant-plan est composé de 4 états différents.

L’état 1 comprend deux zones de défilement horizontales (scroll - top et scroll - bottom), synchronisées en “x” et inversées l’une par rapport à l’autre (bouton dans la fenêtre Propriétés du composant). Dans chaque zone, un marqueur par défaut a été placé pour s’assurer que la zone s’affiche toujours au même endroit (fenêtre Edition). Dans le composant du haut (scroll - top), trois marqueurs ont été placés quand l’image se rapproche de la position centrée :

  • le 1er marqueur contrôle un composant multi-état (hera, affichage de l’état 1 : empty)

  • le 2ème fait apparaître le 2ème état du même composant, qui comprend le texte. Il a une autre action également : déplacer (de quelques pixels) la zone de défilement jusqu’au bon endroit correspondant au 3ème marqueur.

  • Le 3ème marqueur créé la transition avec un changement d’univers : il permet de changer l’avant-plan et l’arrière-plan.

Les autres états de l’avant-plan correspondent aux différentes dispositions d’une barre de menu classique. Les zones de défilement de l’état 1 sont cachées au-dessus et en-dessous de l’espace visible pour permettre de réaliser cet effet d’ouverture par transition automatique. Des zones interactives ont été placées au-dessus de chaque catégorie pour rediriger vers l’écran correspondant. Un drapeau symbolise la langue de l’application : dans un composant multi-état se trouvent un drapeau anglais et un drapeau français. Une zone interactive a été placée au-dessus : au tap, le composant multi-état change d’état et l’application change de langue en fonction de l’état affiché (action “changer de langue”).

L’arrière plan 1 est un fond de couleur. Il est affiché par défaut lorsque l’animation de l’avant-plan est jouée. Lorsque le 3ème marqueur est activé, l’avant-plan change pour un fond blanc neutre, utilisé dans tout le reste de l’application.

C’est l’apparition de l’avant-plan 2 qui créé la transition vers l’état 2.

 

2. Activities (état 2)

L’état 2 est composé seulement d’une zone de défilement qui couvre tout l’écran et qui permet cette navigation verticale.

A l’affichage de cet état, plusieurs informations apparaissent à la suite les unes des autres. Les premières statistiques (du haut) sont contenues dans un composant multi-état (statistics 1) : les chiffres apparaissent au fur et à mesure des états, le 4ème état étant l’état complet. Ce composant est par défaut vide, càd sur l’état 1. A l’affichage de l’état 1, l’état 2 apparaît et etc., jusqu’à l’état 4. Une durée de 0.7 secondes a été paramétrée.

Le graphique (“Number of stores”) est composé de 5 composants multi-états, chacun comprenant deux états d’apparition de la barre annuelle. Le 1er multi-état (composant Graph 1-2010) est par défaut vide (état 1), mais change automatiquement vers l’état 2 pendant une durée de 0.8 secondes. C’est la même chose pour les 4 autres composants, mais un délai a été défini pour permettre cet effet d’enchaînement.

Les statistiques du dessous (statistics 2) sont contenues de la même façon que les autres statistiques et s’animent pareil.

Les deux autres graphiques (graph 1 et graph 2) s’animent grâce au tap de l’utilisateur, pour déclencher l’état 2. Ici, toutes les barres sont contenues dans le même multi-état, et s’affichent en même temps.

 

3. Results (écran 2)

Le graphique est construit de la même façon que les graphiques de l’écran 1, mais plus d’états ont été créés pour mieux décomposer l’apparition des données. Les transitions se font automatiquement à l’affichage de chaque état.

La carte est composé de nombreux multi-états : les multi-états qui correspondent aux boutons, et les multi-états qui correspondent aux informations à faire apparaître. Prenons l’exemple de North America. Le composant “tap - north america” comprend 2 états, chacun avec un cercle plus ou moins grand. A l’affichage de l’état 1, l’état 2 est affiché et de même entre l’état 2 et l’état 1 : une boucle est ainsi créée. Si je tape sur le multi-état, j’affiche le 2ème état d’un autre multi-état (north america)comprenant la ligne : son 1er état était vide. Automatiquement, il redirige vers le 3ème état avec toutes les informations.

Pour faire apparaître les Press Releases, il suffit d’attribuer une action externe au tap sur les icônes : ouvrir l’URL correspondante. L’affichage se fait en plein écran.

 

4. Statists (écran 3)

Cet écran comprend trois états qui représentent les trois secteurs d’activité. Des composants zone interactive ont été placés au-dessus des trois légendes : ils redirigent au tap, vers l’état correspondant à la sélection.

La courbe du haut (composant multi-état) apparaît automatiquement petit-à-petit sur le même principe de l’apparition automatique entre états. L’état 1 du composant a été défini comme état par défaut, seulement sur l’état 1. En effet, si vous le mettez par défaut sur l’ensemble des états, l’animation repartira à zéro à chaque fois que vous changez de secteur d’activité.

L’effet d’apparition du diagramme est réalisé simplement avec un composant multi-état comprenant deux états. Le premier état semble vide mais non ! Les images (3-1, 3-2 et 3-3) ont une opacité à 0%, et ont subi une rotation pour être les unes sur les autres. A l’affichage de l’état 1, la transition se fait automatiquement avec l’état 2.

Pour en savoir plus :

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !