Shared Objects: Introduction

Les Shared Objects qu'est-ce que c'est ? On pourrait les comparer aux cookies, en ce sens qu'ils permettent de stocker des informations sur le poste de l'utilisateur... Mais dans la pratique, les Shared Objects c'est bien plus cool que les classiques cookies Javascript, tout simplement parce que Flash c'est bien plus cool que le Javascript :-).
Vous pouvez ainsi reconnaître un visiteur régulier à l'entrée d'un site ou encore enregistrer un score... Mais vous pouvez également: sauver un dessin, l'état d'un jeu en cours pour pouvoir le reprendre plus tard là où vous l'aviez laissé, enregistrer une discussion, etc etc... Les possibilités sont innombrables et la plus importante limite est votre imagination.

En guise d'introduction aux Shared Objects, nous allons réaliser ensemble un petit module qui enregistrera le nom et le prénom d'un visiteur ainsi que la date de sa dernière visite. Lors de sa première visite, le visiteur sera invité à saisir son nom et son prénom, action qu'il n'aura plus à accomplir au cours de ses visites ultérieures, puisqu'il sera reconnu par l'application.

Voir l'exemple

Application: préparation

La première chose à faire, avant d'aborder l'interactivité, va être de mettre en place les différents éléments. Notre module comporte en fait 3 temps:

1. Au démarrage (sur la première image donc) on évalue s'il s'agit d'une première visite ou non. Si c'est une première visite, il faut aller remplir le formulaire d'inscription, sinon, on peut avancer directement au début du site.
   Sur cette image on ne trouvera rien d'autre que du code, puisqu'il n'y a aucune interaction, c'est l'application qui va se taper tout le boulot (évaluer si c'est une première visite ou non).
2. Le formulaire d'inscription, situé plus loin sur le scénario. Notez que si ce n'est pas la première visite, on ne passera pas par cette image. (étiquette "formulaire")
   Sur cette image, il vous faudra donc créer un mini-formulaire, composé de 2 champs de saisie dans lesquels l'utilisateur sera invité à entrer ses noms et prénoms. Donnez les noms de variables "nom" et "prénom" à ces 2 champs, et créez enfin un bouton pour "entrer" dans le site une fois les 2 champs (nom et prénom) remplis.
3. Le début du site. (étiquette "debut")
   Ici, on va afficher un message de bienvenue suivi du nom du visiteur, ainsi qu'un message signalant la date et l'heure de la dernière visite. Créez donc 2 champs texte dynamiques et donnez leur les noms de variable "bienvenue" et "derniereVisite".

Et voilà pour les préliminaires.... Maintenant que tous ces éléments sont mis-en-place, penchons nous un peu sur la programmation de l'application.

Programmation: image 1

On l'a dit, sur la première image, il faut évaluer si l'utilisateur est déjà venu ou non. Les infos concernant le visiteur sont stockées sur son ordinateur dans le répertoire suivant: Documents and SettingsNom du ProfilApplication DataMacromediaFlash PlayerNom du Domaine du swf(localhost si le swf est joué localement). Dans ce dossier, vous pouvez stocker autant de Shared Objects que vous le souhaitez, chacun de ces fichiers (extension .SOL) contenant toutes les variables et objets (tableaux, dates, objets associatifs) nécessaires à votre application.
Dans notre cas, je rappelle, nous avons 2 chaînes de caractères (nom et prenom) et une date (dernière visite) à enregistrer.

// Création d'une référence vers le SharedObject "visiteur":
utilisateur = SharedObject.getLocal("visiteur");

// Si la date de la dernière visite (nom de variable "dVisite")
// n'est pas définie, c'est que c'est la première visite de
// l'utilisateur, il est donc redirigé vers le formulaire d'inscription:
if (utilisateur.data.dVisite == undefined){
_root.gotoAndStop("formulaire");
// Sinon, on récupère les données nécessaires, et
// on avance au début du site.
} else {
prenom = utilisateur.data.prenom;
nom = utilisateur.data.nom;
dVisite = utilisateur.data.dVisite;
_root.gotoAndStop("debut");
}

Programmation: image "formulaire"

On l'a vu quand on s'est occupé du code de la première image, la première chose qu'on avait fait c'était créer une référence pointant vers le Shared Object qui contient les informations. Cette référence nous permet de lire le contenu du Shared Object, mais pas de l'enregistrer. Pour enregistrer quelque chose dans le fichier SOL, on utilisera la méthode flush().

Les actions qui suivent sont placées sur le bouton "entrer":

on(release){
// Création d'un nouvel objet Date
dVisite = new Date();
// On affecte à la variable nom qui est dans le SharedObject
// la valeur tapée dans le champ de saisie "nom":
utilisateur.data.nom = nom;
// Pareil pour prénom:
utilisateur.data.prenom = prenom;
// ... on stocke également l'objet Date
utilisateur.data.dVisite = dVisite;
// Et on sauve le tout dans le fichier SOL:
utilisateur.flush();
// et on avance au début du site:
_root.gotoAndStop("debut");
}

Programmation: image "debut"

// On affiche les données dans les champs dynamiques:
bienvenue = "Bienvenue " + prenom +" "+ nom;
derniereVisite = "Votre dernière visite date du: "+dVisite.getDate()+"/"+(dVisite.getMonth()+1)+"/"+dVisite.getFullYear()+" à "+dVisite.getHours()+"h"+dVisite.getMinutes();

// On crée un nouvel objet Date pour mettre à jour la date de la dernière visite:
dVisite = new Date();
// Et on le stocke dans le SharedObject:
utilisateur.data.dVisite = dVisite;
utilisateur.flush();

Voilà pour une courte introduction aux Shared Objects. Attention, comme je vous l'ai indiqué plus haut, ce ne sont pas que des simples cookies, et vous pouvez tirer des Shared Objects bien d'avantage que l'exemple décrit ci-dessus.

Si vous réalisez d'intéressantes applications avec ces objets, n'hésitez pas à nous en faire part !