Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - Suppléments -

Comment reconaître une animation interactive ?

Pour la journée d’informations sur les outils et formats numériques du 12 Octobre 2005, l’Atelier Hypermedia devait proposer un petit tour de 45 minutes sur les différents formats et programmes existants pour créer des animations interactives. malheureusement, nous n’avons pas pû faire cette présentation (folie ? maladie incurable ? simulacre ?). Nous le proposons donc ici comme document de référence pour ceux intéressé.

Programme vs. Document

Avant d’arriver à l’interactivité, nous avons un certain nombre de distinctions à faire.

La première distinction à faire est celle entre un document et un programme. Bien que cette distinction ne soit pas hermétique — et qu’il poserait même des problèmes ontologiques au niveau du fonctionnement interne de la machine — il n’empêche que pratiquement tous les ordinateurs fonctionne aujourd’hui sur cette distinction, au moins sur le plan métaphorique. Pour donner donc une définition provisoire de cette distinction, disons qu’un programme génère et manipule des documents. Il n’est pas un secret que l’informatique concerne le traitement de l’information. Dans cette définition nous pourrions dire que le programme est le traitement, alors que le document est l’information qu’il traite.

Cette distinction est assez claire concernant un document texte et le programme de traitement de texte. Par exemple, ici, nous avons une programme nommée « Text Edit » qui est actuellement en train de traiter un document nommé « op_art.txt ».

Sur macinotosh, nous pouvons facilement reconnaître un programme en cliquant une fois sur son icône. Sur macintosh, un programme s’appelle une « Application », comme on peut voir dans l’illustration suivante.

Sur Windows la même distinction s’opère avec juste une petite distinction de terminologie : un programme s’appelle un « Executable », c’est-à-dire quelque chose qui execute des actions.

Cette distinction entre programme et document — autremment dit entre traitement et donnée — est également à l’oeuvre dans la création d’images. Le programme/application/executable Photoshop, par exemple, est un programme qui contient un certain nombre d’actions permettant de créer et modifier des documents d’images.

On peut par exemple créer l’image d’un carré noir dans Photoshop et le sauvegarder en tant que document sous le nom « carré.jpg ». En regardant ce document dans le finder nous pouvons voir que le système lui a attribué automatiquement le statut de « fichier ». Le mot « fichier » est juste un autre nom pour un document. On voit aussi qu’il a indiqué le Programme (Photoshop) qui sait traiter, voire executer, ce document.

Quand nous disons qu’un programme sait traiter ou executer un document, nous voulons dire que ce programme peut ouvrir le document, et qu’il peut faire des changements dans ce document. Certains programmes, comme nous verrons, ne feront rien d’autre que jouer des documents — il s’agit néanmoins d’une action opérée sur le document qui jusque-là restait à l’état passif dans le disque dûr de l’ordinateur. C’est ici que la notion de formats devient important, et que l’informatique s’ouvre à des guerres politico-économiques qui peuvent aller jusqu’à concerner les plus hautes instances internationales, comme le cours suprême américain ou le conseil européen dans le cas de microsoft. Si un document ne peut être ouvert que par un programme-x (exemple : microsoft Word), et que ce programme-x devient de-facto un standard de communication, alors la société publique devient de-facto dépendant d’un taxe venu du monde privé qu’il faut payer pour avoir accès au monde des communications mondiales. Cette séparation entre document et programme est alors non seulement une séparation fonctionelle, elle est également une des expressions de l’idéologie de ces machines.

Documents en mouvement

Nous allons maintenant créer un document en mouvement. Ce document, comme le document texte et le document image, sera construit à l’intérieur d’un programme de traitement de documents, mais cette fois-ci de documents en mouvement. Nous allons, comme dans Photoshop, créer un carré noir, mais cette fois-ci nous ajouterons du mouvement. Il existe plusieurs logiciels de création d’images en mouvement, nous avons utilisé ici l’application After Effects.

Notez que le programme contient maintenant une piste temporelle, sur laquelle nous avons changé la position du carré à différentes positions pendant deux secondes. Ensuite nous avons demandé à After Effects d’exporter notre image (en mouvement) dans un format que d’autres programmes peuvent lire :

En ouvrant, par exemple le lecteur d’images en mouvement, Quicktime, nous pouvons voir notre belle image en mouvement.

Le lecteur Quicktime est un logiciel différent des autres logiciels que nous avons vu jusqu’ici. Bien que le lecteur Quicktime peut traiter l’image (c’est un secret bien gardé), il est surtout connu pour ses capacités de présentation d’images en mouvement. Quicktime sait lire des dizaines de formats d’images en mouvement.

Nous arrivons donc à une deuxième distinction : celle des documents fixes et les documents en mouvement. Les documents fixes peuvent être des fichiers image ou des fichiers texte, mais qui ne s’animent pas, même dans un lecteur comme le Lecteur Quicktime. Par contre, des documents comme celui qu’on vient de créer sont à l’origine conçu pour être en mouvement, et nécessite donc un programme d’un nouveau type — un lecteur — qui sait lire ce genre de documents.

D’autres logiciels peuvent également faire office de lecteur d’images en mouvement... comme... par exemple... votre browser Internet. Voici, par exemple, directemment dans votre browser/lecteur Internet, l’image en format GIF que nous avons créé dans After Effects :

Si tout va bien, il devrait être en train de frétiller.

Hyperdocuments

Nous avons vu que nous pouvons utiliser des applications pour créer des documents fixes et des documents en mouvement. mais ce ne sont pas les animations en mouvement qui nous intéressent, ce sont les animations interactives qui nous concerne ici. Alors, comme nous avons demandé au début de cet article, Comment reconnaître une animation interactive ?

Pour répondre à cette question, regardons quelles sont les animations qui ne sont pas interactives. Cliquez, par exemple, sur l’image que nous venons d’afficher dans votre navigateur Internet (le petit carré noir qui frétille). Vous pouvez voir que cette animation n’est pas interactive — il ne réagit pas à votre souris — et si vous regardez encore plus près vous pouvez voir qu’il n’est même pas générative (i.e. évolutive), parce qu’il fait sans cesse les mêmes mouvements en boucle. Son mouvement aléatoire, par exemple, suit toujours les mêmes trajets. Cette animation n’est pas interactive, son trajet est toujours le même, car After Effects n’est pas un programme dédié à la création d’animations interactives. Il a été conçu pour créer des animations linéaires, comme pour le cinéma ou la télévision.

Alors, la question se pose, comment faire une animation interactive ? Et peut-être encore plus important, en quoi consiste une animation interactive ?

La réponse est relativement simple, si nous revenons à notre distinction de départ : une animation interactive est elle-même le programme des modulations données sur une image. C’est une image constituée dans un programme, contrairement à un programme qui traite une image passive ou une image en mouvement. C’est une image dynamique, une hyperimage. La singularité d’une image interactive c’est son programme interne, le programme qui accompagne l’image et lui permet d’évoluer selon les critères définies dans ce programme. Du coup l’image peut réagir à l’utilisateur, ou réagir à des interactions internes, comme à travers le temps. même si une image interactive se comporte de la même façon d’une image fixe ou une image en mouvement, elle n’est pas construite de la même façon, parce que le programme le génère dans le hic et nunc, le ici et maintenant, de l’ordinateur.

Définition : une animation interactive n’est rien d’autre finalement qu’un programme.

Ce qui nous amène à une question plus pragmatique : comment créer des animations interactives ?

Il existe plusieurs options pour créer des animations interactives : des logiciels gratuits, des environements de programmation payants, et des solutions semi-payantes/semi-gratuites. Les plus connus des environements de programmation d’animations interactives sont tous les deux des créations de la même société : macromedia Flash et macromedia Director Shockwave Studio. On pourrait également parler de mAX/msp/Jitter, enseigné dans l’Atelier Son, ou des equivalents gratuits comme Eyes Web ou Pure Data. Dans l’Atelier nous avons longtemps donné un cours sur Director, mais avons décidé récemment de proposer un nouveau cours sur l’environement de programmation ouvert (et donc gratuit) Processing. Il existe ensuite des options semi-payantes, très puissants, mais beaucoup plus difficiles d’accès, comme les systèmes d’exploitation microsoft Windows ou Apple mac OS X : une fois que vous avez installé un des ces systèmes d’exploitation sur votre machine vous avez le droit de créer autant de programmes que vous voulez. Les outils développement pour mac OS X sont, par exemple, données gratuitement à tous ses utilisateurs ; comme une animation interactive est un programme comme un autre, si vous savez créer un programme, vous savez également créer une animation interactive. Il existe finalement la plateforme Java qui est également gratuit, et peut aussi tourner sur des systèmes d’exploitation libres, comme Linux. Ce qui nous donne beaucoup d’options.

Il y a une distinction importante néanmoins à faire dans cette liste d’environements de programmation, une distinction qui traiterons jusqu’à la fin de cet article : la distinction entre un programme autonome et un programme tournant à l’intérieur d’un lecteur. Comme les images en mouvement (.gif, .mov, .avi, .dvx), il existe des formats d’animations interactives qui nécessite un lecteur pour faire tourner le programme. C’est le cas de Flash, par exemple : si l’utilisateur n’a pas le lecteur Flash (le lecteur est gratuit, ne vous inquiétez pas), il ne peut pas voir votre animation. Ceci pourrait sembler bizarre, surtout après la distinction que nous avons fait entre programme et document, mais ces formats se sont révélés finalement très pratiques : l’utiliser ne télécharge qu’une fois l’ensemble des fonctions possibles, puis pour chaque animation charge seulement sur son ordinateur la liste des instructions spécifiques. Une animation Flash peut du coup ne peser que quelques kiloctets, alors qu’un programme tout entier prendrait plusieurs megaoctets. Il faut donc distingué des programmes autonomes des programmes tournant à l’intérieur d’un lecteur/applet/plug-in.

Applets/Plug-ins/Shockwaves

Pour parler des animations interactives qui fonctionnent à partir de modules externes, prenons comme exemple le plus célèbre des formats d’animations interactives, macromedia Flash. Voici une photo d’écran similaire de notre animation faite dans After Effects — mais cette fois-ci faite à l’intérieur du logiciel auteur Flash. Comme pour la précédente animation, il y a une piste temporelle, et un carré noir :

mais quand nous éxporons cette image dans un format lisible par un lecteur (ici notre lecteur/navigateur Web), nous constatons que le résultat est tout à fait autre. Voici le résultat de cette animation une fois exportée en format .swa. Notez que vous pouvez maintenant interagir avec l’image, et que celle-ci bouge de façon autonome :

Qu’est-ce qui s’est passé à l’image ? Pourquoi, tout d’un coup cette image est devenue interactive, alors que l’image précédente ne l’était pas ? La réponse est dans le programme, dont voici le code :

En réalité, nous avons glissé un programme dans l’image, un programme qui expliquait à l’animation Flash qu’il doit 1) dupliquer le carré en plusieurs carrées, 2) bouger en permanence les carrés de façon aléatoire, mais 3) en fonction de la distance de la souris. C’est ce code — un peu étrange pour le débutant — qui a permis à cette animation de non seulement s’activer, mais également de réagir aux mouvements de l’utilisateur.

On reconnaît donc l’animation interactive par sa réactivité, sa capacité à évoluer selon un programme interne à l’image.

Côté technique, on peut également reconnaître une animation interactive par le format de ses composants. Comme nous avons dit plus haut, il existe des animations interactives en forme de programmes autonomes (des Applications ou Executables), puis il y a des animations interactives qui tournent à l’intérieur d’un lecteur (ici votre browser). Si nous remontons toute la chaîne de production, de la création de l’animation jusqu’à son apparition sur votre ordinateur, il a fallu en réalité quatre élements :

- le programme Flash côté-auteur (Flash mX, Flash 8, ...)
- l’animation Flash original (fichier.fla)
- l’animation Flash compressé/protégé (fichier.swa)
- le programme Flash côté-client (Flash Player).

A quoi corréspond ces quatre éléments ?

- Le programme Flash est une application qui permet la création de sous-programmes Flash, autremment dit des animations Flash. L’application Flash est ce qu’on doit acheter chez macromedia et ressemble à ceci :

- Le document « carré.fla » est le fichier que l’auteur crée à l’intérieur du programme Flash. Ce document contient le code du programme interactif, ainsi que les images de cette animation.

- Le document « carré.swa » est le fichier que l’utilisateur télécharge automatiquement sur son ordinateur quand il regarde la page web. Par exemple, quand vous avez téléchargé cette page dans votre navigateur, ce navigateur a automatiquement téléchargé ce fichier « carré.swa ». Ce fichier ne permet pas à l’utilisateur de voir le code qui fait marcher votre programme. Il s’agit d’un document protégé qui contient votre programme, mais dans un format que seul le lecteur Flash sait lire. L’avantage de ce fichier est sa taille : ici il ne pèse que 4 kiloctets. En dissociant le lecteur Flash et de ce fichier, l’utilisateur peut naviguer le web rapidement et ne charger que les parties qui changent entre une animation Flash et une autre.

- Le dernier composant, et le plus important finalement, est le lecteur Flash Player lui-même, celui qui permet à tous les ordinateurs de comprendre votre animation et de le jouer. Ce programme fonctionne même si l’utilisateur n’a pas le programme Flash-auteur. Sur mac OS X, ce composant se glisse dans un dossier spécial, réservé à toutes les modules externe qui étendent la fonctionnalité de votre navigateur. Autremment dit, ce qui permet à votre animation Flash de tourner, c’est un petit programme qui vit au fond de votre ordinateur et qui s’active chaque fois qu’il rencontre une animation Flash. C’est en gros la définition d’un plug-in/module externe/Applet/Shockwave : un micro-programme caché dans l’ordinateur distant qui permet à vos programmes de fonctionner sur cet ordinateur distant.

Si l’utilisateur n’a pas le Flash Player installé dans ce dossier spécial, votre animation Flash n’apparaîtra pas dans son navigateur.

Applications/Executables

Un programme autonome est à la fois plus simple et plus compliqué qu’un programme couplé avec un lecteur/plug-in. L’utilisateur n’a pas besoin de télécharger un lecteur (par exemple le Lecteur Flash), il télécharge le programme et ce programme fonctionne comme n’importe quel logiciel : en double-cliquant dessus. Par contre, un programme autonome doit être compilé pour chaque système d’exploitation, autremment dit, un programme autonome doit être construit pour le type d’ordinateur qui va le jouer. En réalité cela veut dire qu’il faut créer une version pour mac et une version pour PC, si vous voulez que le maximum de personnes puissent voir votre animation interactive.

L’Atelier Hypermedia s’est beaucoup servi de l’environement Director, notamment parce qu’il simplifie ce procédé. L’environement Director permet non seulement de créer des animations qui fonctionne dans un navigateur web, comme le plug-in Flash, mais il permet également de créer facilement une application autonome pour mac OS 9, mac OS X, et Windows (95, 98, NT, XP, +). Il suffit de cliquer sur un bouton et Director construit votre application autonome qui fonctionnera comme n’importe quelle programme de votre ordinateur.

Par exemple, l’animation suivante reproduit notre exemple plus haut : un carré noir sur fond blanc, avec un programme associé...

Ce qui est intéressant ensuite avec cette animation, c’est qu’elle peut être par la suite exportée en plusieurs formats. La fenêtre des Paramètres de publication donne une petite idée des possibilités :

En cochant ces sélections et en cliquant sur publier nous nous trouvons avec les documents et applications suivants :

- Le fichier « carré.dir » sont les codes sources de programme. C’est le document que l’auteur peut partager ou ne pas partager, comme il veut.
- Le fichier « carré.dcr » est l’équivalent du fichier « carré.swa » : il nous permet de glisser notre animation dans une page web. Si l’utilisateur a le lecteur Shockwave Player, il pourra voir notre animation, exactemment de la même mannière.
- L’application « carré.osx » est notre programme compilé dans une application autonome. On pourrait le placer sur un CD-Rom, par exemple, et les utilisateurs sous mac OS X pourront voir notre animation (ici configuré pour être en plein écran)
- L’application « carré.exe » est la même chose, mais pour Windows (98, mE, NT, XP, ...)
- L’application « carré.classic » est la même chose, mais pour les machines tournant encore sous mac OS 9.

Il est important de noter que Director n’est pas le seul environment qui peut créer des applications autonomes. max/mSP/Jitter, Processing, Java, ...., peuvent aussi créer des applications tournant à la fois sur mac OS X et Windows. Processing et Java, en plus, peuvent également tourner sur la plateforme Linux (très pratique pour des artistes voulant créer des installations peu chères ou nécessitant des élements particulières).

Conclusion

Une animation interactive nécessite un programme interne pour fonctionner. Ce programme peut être écrit de différents mannières, mais sera présenté à l’utilisateur de deux façons distinctes : 1) le programme sera joué par un lecteur quelconque, comme le Flash Player, à l’intérieur d’une page web ; 2) le programme s’executera tout seul à partir du bureau de l’utilisateur comme une application spécifique. Les outils de développement de programmes interactives sont très divers. Vous pouvez d’ailleurs trouver plus d’explications sur quelques-uns de ces environements dans les cours en-ligne de l’Atelier Hypermedia.


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr