Spectacles de contes musicaux

Le temps a passé très vite depuis le dernier article publié ici, il faut dire que le rush habituel de rentrée (redémarrage des saisons culturelles) a été suivi par quelques travaux importants. Je vais essayer de rattraper un peu du retard pris dans la mise à jour de ce blog, en commençant par présenter un site internet consacré à des spectacles musicaux.

Le concept

La demande initiale était d’arriver à matérialiser l’idée d’un arbre-livre, un arbre qui serait aussi un livre (les contes musicaux étant inspirés de la Bible, et plus particulièrement de la figure de l’arbre qui y apparaît à différents endroits, avec différentes significations).

À cette demande initiale s’ajoutait celle de faire figurer en page d’accueil un diaporama avec des images tirées des spectacles. Pour moi, le défi consistait donc à trouver une solution qui articule ces trois visuels (livre + arbre + diaporama) sans donner le sentiment d’une juxtaposition, mais bien au contraire d’un seul et même « objet » constitué de parties indissociables.

L’idée de partir du double sens du mot « feuille » (de l’arbre, d’un livre) s’est rapidement avérée graphiquement peu exploitable au sens strict, dans le contexte présent. Le concept de « feuilleter un arbre » a néanmoins continué à s’imposer, d’autant qu’il permettait d’inclure également le « feuilletage » d’un album photo. Restait à passer du concept à une matérialisation graphique satisfaisante. Après quelques recherches, voici le résultat, à visualiser en ligne pour voir comment le diaporama été intégré à l’image et animé (cliquer sur l’image ci-dessous pour aller sur le site) :

Le titre

Le « m » de « musicaux » a été remplacé dans le titre par un groupe de trois croches. Ce choix visait à rendre immédiate la compréhension qu’il s’agit bien de spectacles musicaux, avant même de lire le titre, mais il apporte aussi une évocation de l’écriture sémitique, concentrant ainsi en un seul signe graphique les deux caractéristiques majeures des spectacles.

Le mouvement du titrage, associé aux traits courbes, évoque explicitement l’idée d’un mouvement d’air. On peut y voir la référence à une citation biblique (1 Rois 19, 9-13), selon laquelle Dieu se manifeste de façon pratiquement imperceptible dans « le murmure d’une brise légère », et non dans le bruit et la fureur d’une tempête.

Le son

J’ai suggéré l’idée d’associer un montage son à la page d’accueil. Bien qu’en général je sois assez hostile à l’utilisation de fond sonore sur les sites internet (combien de sites imposent au visiteur un bruitage ou une musique en boucle, sans réelle pertinence vis-à-vis du contenu du site !), elle m’a semblé s’imposer dans le cas présent, en grande partie à cause du diaporama : montrer seulement des images de spectacles où la musique joue un rôle central, c’est presque trahir les créations, un peu comme si, à l’inverse, on mettait en ligne la bande-annonce d’un film… sans les images.

Pour que le montage son fasse un ensemble cohérent avec l’animation du diaporama, j’ai suggéré qu’il soit constitué d’extraits particulièrement courts, qui disparaissent à peine apparus, et se superposent partiellement, d’une façon analogue à l’apparition/disparition des images d’un livre qu’on feuillette. L’image que j’ai utilisée pour expliquer mon idée était celle de passants dans une rue, dont un spectateur immobile capterait les pensées furtivement au moment de leur passage. Pour montrer plus concrètement ce que j’imaginais précisément comme type de montage, j’en ai réalisé un. Il a en fait été adopté tel quel, c’est celui que l’on peut entendre sur le site.

Les pages intérieures

Les pages intérieures sont présentées sur un décor déclinant l’idée de feuilleter l’arbre. Un découpage minutieux de l’image de fond en éléments distincts permet au décor du livre de s’allonger indéfiniment en hauteur, en fonction de la longueur des textes à afficher.

Les boutons de commande de lecture (de l’album photo, des extraits sonores) ont été spécialement créés pour le site, en imitant l’effet d’un dessin au crayon à papier. Une petite animation donne l’impression que les boutons sont effectivement dessinés par une main invisible lorsqu’ils apparaissent.

Publicité

Site MDA61 : épisode 1

Voici la page d’accueil temporaire du futur site de la Maison des adolescents de l’Orne, dont le développement commencera prochainement (cliquer sur l’image ci-dessous pour voir la page en ligne).

 

Bien que temporaire, cette page d’accueil présente une carte interactive animée de l’Orne, dont j’ai particulièrement soigné les effets d’animation car cette carte a vocation à rester dans le futur site définitif.

 

 

Voir les effets d’animation de cette carte à www.maison-des-adolescents-61.fr

 

Animations Flash pour le site d’Isabelle Lépinay

J’ai profité de l’occasion d’une mise à jour du site pour dynamiser deux pages au moyen de nouvelles animations. Comme toujours, plutôt que de récupérer des codes sur internet, je crée ces animations intégralement afin de garantir leur originalité : mon commanditaire est assuré d’avoir une création sur mesure, et qu’on ne verra nulle part ailleurs sur le web.

La page d’accueil (www.isabelle-lepinay.com), totalement refondue graphiquement, présente désormais deux animations : l’une, discrète, agrémente le nom « Lépinay » d’un effet vaporeux élégant. L’autre anime le menu, d’une façon originale : lorsqu’on place la souris sur l’un des trois liens, les deux autres glissent vers la droite, se mettant en retrait derrière l’accordéon. Les observateurs remarqueront l’effet d’animation rotatif discret des puces, qui apporte une touche de sophistication au menu.

Page d’accueil du site

La page orchestre (www.isabelle-lepinay.com/orchestre.html) est tout entière une animation : lorsqu’on arrive sur la page, une introduction présente le logo de façon animée, éclairant sa signification (j’ai déjà parlé ici de la création du logo, voir l’article correspondant).

Une fois l’animation introductive terminée, un effet de transition original fait apparaître la page orchestre. L’effet de transition est bien sûr lui aussi une création, je l’ai conçu en partant de l’idée des boutons accordéon associée à celle d’une boule à facettes.

Page Orchestre avec logo animé en introduction
et effet de transition personnalisé vers la page

Pour que l’expérience du visiteur soit la plus fluide possible, j’ai codé la page pour gérer au mieux la situation quelle que soit la vitesse de connexion. Ainsi, pendant que l’introduction (animation du logo) s’exécute, la page se charge. Lorsque l’introduction est finie, si le chargement de la page l’est aussi l’effet de transition commence immédiatement. Si le chargement n’est pas tout à fait fini, un message d’attente s’affiche et l’effet de transition est suspendu, pour ne démarrer qu’une fois le chargement terminé.

La partie la plus riche du site reste la section « L’accordéoniste » : pratiquement chaque page présente une animation originale.