En décembre 2020, l’éditeur de logiciels Adobe mettait fin au support du logiciel Flash qui fut longtemps un plugin incontournable des sites Web : au début des années 2000, les statistiques annonçaient que plus de 90% des navigateurs de la planète possédaient une version de ce plugin. Après la découverte de multiples failles de sécurité, Adobe annonce l’abandon du développement de son plugin en 2017 pour un arrêt 3 ans plus tard.
C’est un petit bouleversement dans le monde du e-Learning : la quasi-totalité des projets étaient développés en Flash. Même Storyline s’appuyait sur le plugin Flash pour diffuser ses modules !
La demande
Si beaucoup d’entreprises ont profité de cette occasion pour renouveler leur collection, d’autres ont préféré effectuer un portage “à l’identique”. C’est le cas d’une entreprise du secteur bancaire pour laquelle j’ai travaillé il y a 2 ans. Elle forme régulièrement ses collaborateurs aux problématiques de Sécurité des Personnes et des Biens dans ses locaux. Elle dispose d’un large dispositif mêlant présentiel et distanciel. Plusieurs profils d’utilisateurs ont été mis en place dans le but de leur attribuer un parcours personnalisé.
Le module a été réalisé en 2006. Il n’est plus compatible avec les navigateurs récents. Le dispositif distanciel se compose de 4 modules d’une durée de 5 à 30mn (4 profils utilisateurs). Certains éléments sont utilisés par plusieurs profils, d’autres sont spécifiques à un profil.
Le client ne souhaite pas changer la modalité pédagogique du e-Learning, alliant pédagogie interrogative et apports de contenu car cette forme s'intègre parfaitement dans le cursus déjà en place. Afin de limiter les coûts de production et conserver la cohérence graphique avec l’existant (présentations PPT, fiches techniques, comm interne, …) , la charte graphique sera reprise à l’identique.
Périmètre d'intervention
Demande client
- développement à l’identique au format HTML5
- mise à jour succincte du contenu
- autonomie de mise à jour
- optimisation des ressources (bande passante, poids de ressources)
- LMS : Syfadis → Scorm 2004
- délai de production : 2 mois
Ma roadmap
- Rétro-ingénierie des modules pour en extraire leurs principes fonctionnels, estimer la volumétrie
- Évaluer la faisabilité du portage vers Storyline. Identifier les points nécessitant des adaptations
- Définir une méthodologie de production : récupération des ressources et médias embarqués, optimisation
- Estimer et planifier
- Recetter le projet (fonctionnel et LMS) et livraison finale (Scorm package)
Rétro Ingénierie
Même si la charte graphique n’est plus au goût du jour, on comprend mieux le choix du client de vouloir conserver le projet à l’identique : il a bénéficié d’une conception et d’une médiatisation soignée. Les thèmes principaux de la sécurité sont abordés à travers une série de Storytelling animés, sonorisés et scénarisés . Ces saynètes s’inspirent du quotidien des collaborateurs d’une agence bancaire. Elles ont été réalisées en Flash. Leur durée varie de 20 sec. à 2 minutes.
Tous les profils sont habillés par le même univers graphique et sensiblement la même interface hormis quelques différences fonctionnelles. Les principes pédagogiques utilisés varient selon le profil. Chaque notion fait la part belle au contenu audio.
Éléments Sources en notre possession :
- Package Scorm 1.2
- Sources Flash
- Documents de conception (doc & ppt)
Détails fonctionnels et ergonomiques :
- Un bouton “mettre en pause” permet l’arrêt/reprise du contenu sonore en cours de diffusion
- L’apprenant doit visualiser l'intégralité d’un écran pour passer au suivant
- Le bouton Suite apparaît et clignote lorsque la totalité du contenu est déroulé
- L’apprenant peut accéder à chaque notion par le menu d’accès direct
- Les réponses aux questions sont mémorisées pour pouvoir être imprimées. Ces documents seront utilisés lors de la session présentielle
Analysons les détails de chaque profil…
Profil 1 (blended Learning)
Ce module est utilisé en préambule d’une formation présentielle. Il permet de présenter 2 cas essentiels de la sécurité en agence bancaire.
Durée : 15-20 mn
Structure des cas concrets
La même structure est utilisée pour tous les cas : après une courte explication du contexte, une séquence animée met en scène la problématique et se termine au moment crucial de l’action, laissant le visionneur dans l’expectative de la fin de l’histoire. À la fin du cas, un visuel invite l’apprenant à réfléchir sur la façon dont il aurait réagi en pareille situation. Le module se termine par un formulaire de 7 questions amenant l'apprenant à réfléchir sur les comportements à adopter lors de situations à risque. Ce formulaire doit pouvoir être imprimé et servira de support de travail lors de la session présentielle.
Particularités techniques
- Impression du formulaire
- Contrairement au profil 2, le menu accès direct est disponible sans condition de visite
Profil 2 (blended Learning)
Le parcours de ce profil prévoit également une formation présentielle complémentaire. Il permet de présenter 6 cas essentiels de la sécurité en agence bancaire. Les cas 1 et 2 présentés dans le profil 1 font partie de ce parcours.
Durée : 20-30 mn
Structure des cas concrets
Après une courte explication du contexte, une séquence met en scène la problématique.
A travers un QCU, l’apprenant doit choisir le comportement le plus adapté à la situation. Chaque choix de réponse sera accompagné d’un commentaire sur la pertinence de la réponse. L’apprenant ne pourra accéder à la suite du didacticiel que si la réponse la plus appropriée a été trouvée.
L’écran de fin de module donne accès à un mémo PDF à conserver.
Particularités techniques
- Complétude de chaque cas obligatoire
- Le menu accès direct est disponible uniquement quand tous les cas ont été déroulés
- Commentaire différencié pour chaque choix de réponse
- Quiz non scorés
Profil 3 (100% digital)
Le parcours du Profil 3 est destiné aux personnes qui ne fréquentent que ponctuellement les locaux de l’entreprise (stagiaires, intérimaires, …). Un Quiz de sensibilisation de 20 questions a été réalisé spécifiquement pour ces cibles.
Durée : 15-20 mn
Schéma fonctionnel
Particularités techniques
- Éléments sonores (voix off)
- Introduction - visite guidée optionnelle
- 20 questions type QCU
- Réponses pondérées (entre 0 et 3 points)
- Correction immédiate avec information de pondération
- Feedback différencié selon le choix de la réponse
- La couleur du cartouche de feedback change avec la pondération (vert | rouge | orange)
- Contenu additionnel sur correction de réponse
- État d’avancement du quiz
- Comptabilisation des point en temps réel
- Page de résultat : points + pourcentage
- Revue des questions en fin d’exercice avec rappel des réponses utilisateur
- Scorm 1.2
Profil 4 (introduction présentiel)
Ce module d’une durée de 5 mn est une introduction aux thématiques qui seront abordées pendant la formation présentielle. La séquence vidéo reprend en exemple des comportements inadéquats observés face à des situations critiques. 10 thèmes sont abordés.
Durée : 5 mn
Schéma fonctionnel
Particularités techniques
- Choix de dérouler le module avec ou sans le son sur l’écran des objectifs
Faisabilité du portage vers Storyline
L’utilisation de Storyline est recommandée même si certaines fonctionnalités ne seront pas totalement reproductibles. Dans tous les cas, leur absence ne portera pas atteinte à la qualité pédagogique des modules :
- Le formulaire imprimable servant de support pour la formation présentielle ne pourra pas être personnalisé par des éléments graphiques
- Effet d’affichage “typewriter” non reproductible aisément avec Storyline
- Pas de réglage du niveau sonore dans le module
Recommandations
- Création de la charte graphique et de la navigation directement dans Storyline (optimisation)
- Résolution recommandée : 1400x1050 (1,33 → format initial)
- Utilisation du composant natif “quiz” de Storyline.
Méthodologie
Sources de récupération
La réussite du projet sera conditionnée par la récupération des ressources du projet initial. Différentes méthodes peuvent être envisagées en fonction du type de ressources et des sources de récupération mis à disposition.
Les documents de conception (doc & ppt)
Les documents de conception contiennent en théorie tous les éléments de texte du projet. Néanmoins, il faut les utiliser avec précaution car certaines corrections, vous savez, celles qui sont demandées juste avant la livraison finale, n’y sont pas toujours intégrées. Pour pallier ces oublis éventuels, une relecture attentive sera nécessaire.
Fichiers Sources Adobe Flash (fla)
FLA est le format natif des sources du logiciel auteur Adobe Flash. La première solution qui vient à l’esprit est d’utiliser l'éditeur Flash néanmoins il est parfois difficile de faire tourner une application ancienne dans un environnement récent. Adobe propose une application appelée Animate qui permet d’éditer les anciens fichiers FLA. Il est ainsi possible d'accéder aux médias qui ont servi à l’élaboration du projet initial.
| Avantages | Inconvénients |
| → Tous les médias disponibles à un seul endroit | → Exportation de chaque média individuellement : temps de traitement important → Difficile d’identifier les éléments à exporter |
Utilisation d’un logiciel OCR (Reconnaissance Optique de Caractères)
Cette méthode ne peut être utilisée que si vous avez la possibilité de visualiser le projet développé avec un lecteur Flash pour effectuer une copie de chaque écran au format image. Les logiciels OCR offrent un bon niveau de récupération des ressources texte.
| Avantages | Inconvénients |
| → Les ressources texte et image seront récupérées sans doute possible : c’est la dernière version publiée du projet servira de modèle. → Cette opération permettra également la récupération des images → Les images capturées serviront de guide d’intégration dans Storyline | → Obligation de capturer toutes les images : temps de traitement important → Nécessité d’utiliser un player Flash ou un navigateur ancien pour visionner le projet. Les ex-développeurs Flash prévoyants (dont je fais partie) auront probablement pris soin d’archiver une copie installable. |
Mode opératoire
Création des templates Storyline
La charte graphique est un assemblage de forme primitive facilement reproductible avec l’éditeur de formes de Storyline. En procédant ainsi, on économise quelques ko en évitant l’importation de fichiers bitmap. Des copies écran du projet d’origine serviront de guide pour l’intégration dans Storyline.
Récupération du texte et des images par copie écran
Les écrans du module seront capturés au format image à la même résolution que le template Storyline (1400px X 1050px. Cette méthode est plus rapide que l’export depuis le logiciel auteur :
- Pas besoin de redimensionner les images pour optimisation
- La récupération des ressources texte via Google Documents (OCR) permet de récupérer tout le texte en une seule fois
- La mise en place d’un guide facilite la mise en page dans Storyline
Récupération des ressources sonores
Récupération des sons avec Adobe Animate en convertissant le fichier source au format HTML5 Canvas puis en le publiant.
Transformation des séquences Storytelling au format vidéo MP4
Adobe Animate permet la conversion des Source FLA vers un format vidéo. Quelques aménagements sont à prévoir.
Estimer et planifier
La charte graphique est identique aux 4 modules. Pour l’intégration dans Storyline, il est conseillé de procéder par duplication en commençant par le module possédant le plus de contenu commun avec les autres modules afin d’éviter d’intégrer 2 fois le même contenu.
Par ailleurs, le délai de livraison étant un peu serré, nous pouvons prévoir que 2 personnes travaillent concomitamment sur le projet.
Planification
Recette
Le recettage sera effectué en 3 temps :
Relecture contenu
Permet de s’assurer que le contenu a été correctement intégré : pas d’écrans manquants, fautes d’orthographes…
Recettage fonctionnel
permet de contrôler que les spécifications de navigation et les particularités techniques sont bien respectées : clignotement des boutons Suite, pondération du quiz, écran de résultat, gestion du menu, etc…
Recettage LMS
Le recettage LMS s’effectue en 2 temps.
- Vérification de la conformité Scorm
→ utilisation de Scorm Cloud- Importation du package Scorm 2004
- Mémorisation de données utilisateur : temps passé, score final, marque-page, pré-requis éventuels
- Accès au debug Scorm
- Recettage LMS client
- Compatibilité Scorm
- recette finale client
Conclusion
Une bonne préparation permet de prendre en compte les contraintes telles que les délais, les budgets, les ressources et les exigences techniques dès le démarrage du projet. Cela permet de s'assurer que le projet reste conforme aux exigences tout au long de son exécution.
Avantages
- facilite le suivi de projet
- identification des points de vigilance : mise en place des stratégies d'atténuation et de gestion des risques, ce qui permet de minimiser les impacts négatifs sur le projet
- Économie de temps et de ressources : des erreurs coûteuses peuvent être évitées et les ajustements peuvent être apportés avant que le projet ne soit trop avancé
- meilleure coordination entre les différentes parties impliquées, ce qui favorise la motivation et l'engagement envers le projet.
Cette préparation sera d’autant plus bénéfique si plusieurs intervenants sont amenés à travailler simultanément sur un projet.