Intégration des questions Flash dans Easyquizz Pro

Un article de EpistemaWiki.

Sommaire

[modifier]

Fichiers nécessaires

Plusieurs fichiers sont nécessaires pour l’intégration de fichiers flash dans les questionnaires epistema. Pour des raisons de clarté les scripts ont été dissocié du programme principal.

  • Programme principal : Le fichier exercice.fla ou exercice.swf : Il s’agit d’un exercice exemple de glisser-déposer.
  • Fichiers scripts : Le fichier flashJs.as : C’est un fichier de code actionScript qui contient les fonctions nécessaires à la communication entre le player Flash et la page html qui le contient. Ce fichier est uniquement nécessaire lors de la publication du fichier swf. Il est alors intégré au fichier principal et ne nécessite pas d’être placé sur site.

Vous pouvez télécharger le fichier zip suivant qui contient les exemples décrits ci-dessous : IntegrationFlashEasyquizzPro.zip

[modifier]

Principe de fonctionnement

Pour communiquer avec le programme Flash, le questionnaire (en JavaScript) ne peut appeler des fonctions directement. Il peut en revanche modifier des variables du programme Flash. Pour nos besoin, un certain nombre de variables ont été mise en place dans le programme Flash, qui permettent d'indiquer à celui-ci que le questionnaire demande l'exécution d'une routine. Le principe est alors le suivant :

  • Le javascript veut par exemple récupérer le score actuel
  • Il positionne la variable "ecouteur.getScore" à true.
  • Dans le programme Flash, une routine s'exécute en permanence et détecte que la variable est passée à "true". Elle execute alors la fonction interne "getScore", et remet la valeur de la variable "ecouteur.getScore" à false.
  • Cette fonction appelle à son tours la fonction JavaScript getScoreReturnValue en lui passant en paramètre le score
[modifier]

Description des fichiers

[modifier]

Le fichier exercice.fla

Dans le cadre de cette prise-en-main, il s’agit d’un exercice de glisser-déposer mais on pourrait imaginer pratiquement tous type d’exercices réalisables en flash. Cet exercice se base sur un exemple sur la géographie des vins.

  • Descriptif des movies-clip :
    • Une carte de France servant uniquement de repère visuel.
    • 7 étiquettes portant le nom d’une région viticole. Nommées Objet0, Objet1, ..., Objet 6
    • 7 repères servant d’emplacement d’accueil aux étiquettes. Nommées Marque0, Marque1, ..., Marque 6
  • Descriptif du code : 3 parties distincts :
    • La partie include
      #include "flashJs.as" : Indique à Flash d’aller chercher le morceau de code écrit dans le fichier flashJs.as, nous verrons plus tard le descriptif de ce fichier.
    • La partie exercice de glisser-déposer :
      1. Toutes les informations nécessaires à l’initialisation du programme sont écrites dans la liste listeElements. Cette liste est donc essentielle et devra être enregistré dans le cadre de la fonction serialize. L’index de l’élément correspond au numéro de l’objet. Sa valeur indique : 0>Non placé ; 1>Bien placé ; -1>Mal placé
      2. Les fonctions onPress et onRelease : Ce sont les fonctions qui servent au glisser-deposer de chaque objet. La fonction onPress sert à 1. Commencer le glisser-deposer 2. Vérifier si l’objet est déjà positionné sur une marque ou pas. La fonction onRelease sert à 1. Arrêter le glisser-déposer 2. Vérifier si l’objet à été déposé sur une marque ou pas 3. De réagir en fonction de cette interprétation (soit l’objet n’est pas sur une marque et il se remet à sa position initiale, soit il est sur une marque et à ce moment, le fichier listeElements est modifié en conséquence (0,1,-1) ;
    • Le calcul du score :
      Il s’agit d’un fonction qui recalcule le score de l’apprenant à chaque appel en fonction du contenu de listeElements.
[modifier]

Le fichier flashJs.as

C’est uniquement un fichier de code, contenant 4 parties distinctes :

  1. La partie écouteur : Dans sa communication avec Flash, javascript reste limité et ne peut appeler directement les fonctions Flash. Cependant il peut changer la valeur d’un paramètre flash. C’est pourquoi il est nécessaire de mettre un écouteur qui va détecter tout changement de valeur d’un de ses paramètres et appelé la fonction adéquate. C’est l’objet de cette partie. Il y a 6 paramètres qui sont initialisés à false : getScore, getScoreMax, showAnswers, disable, serialize et desarialize. À chaque fois qu’un de ces paramètres passera à true sous l’injonction d’une fonction javascript la fonction correspondante sera appelé dans Flash.
  2. Les fonctions :
    • La fonction getScore : Elle sert à communiquer à javascript le score enregistré dans Flash. Pour cela elle appelle une fonction javascript (returnValue) avec en paramètre le score Flash. Cette dernière ce chargera d’afficher le score Flash.
    • La fonction getScoreMax : Elle sert à communiquer à javascript le score maximum enregistré dans Flash. Pour cela elle appelle une fonction javascript (returnValue) avec en paramètre le score maximum Flash. Cette dernière ce chargera d’afficher le score maximum Flash.
    • La fonction showAnswers : Elle sert d’une part à afficher la réponse sous forme visuel dans flash et d’autres part à envoyer la réponse sous forme textuel à javascript. Cette fonction devra être réécrite en fonction de chaque type d’exercice.
    • La fonction disable : Elle sert à détruire les fonctions de glisser-déposer qui ont été créées lors de l’initialisation. Cette fonction devra être réécrite en fonction de chaque type d’exercice.
    • La fonction serialize : Elle sert à calculer l’état de la question sous forme de chaîne et à passer cette dernière sous forme de paramètre à javascript. La chaîne sera également différente en fonction de chaque type d’exercice.
    • La fonction unserialize : Elle se sert de la variable deserializeParam1 comme chaîne contenant toutes les informations utiles pour remettre l’exercice dans l’état où l’apprenant l’avait laissé. Il est donc nécessaire d’avoir bien encodé les informations (fonction serialize) pour pouvoir les décodées dans cette dernière. Le décodage de la chaîne sera donc adapté en fonction du codage de la fonction serialize.
  3. Paramètres externes : deserializeParam1 : Cette variable est vide lors de l’initialisation de l’exercice. Elle se remplit au moment où la fonction javascript deserialize est appelée. (voir fonction deserialize)
  4. Paramètres publiques : Contient les paramètres publiques que le codeur peut faire varier sans altérer le programme. Ici : score, scoreMax et Disable.
[modifier]

Références

L'intégration Flash dans Easyquizz utilise l'API FS_Command de Flash. Plus d'information pourra être trouvée en suivant les liens suivants : Ca utilise DOFSCOmmand :

Ainsi que :

Macromedia's Technote 04160 (Scripting with Flash)
http://www.macromedia.com/support/flash/ts/documents/tn4160.html
The first developer article on scripting with Flash. Most of the technical information about FS Command is there, but the content is aimed at experienced developers.

Macromedia's Scripting with Flash Tutorial
http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash.html
A well written article covering both JavaScript Flash method usage and fscommand().

Macromedia's Creating a smarter Site Navigation Bar with Flash and JavaScript
http://web.archive.org/web/20010210160846/http://www.macromedia.com/support/flash/how/subjects/javascriptdemo/contents.html
A short discussion on how to use JavaScript to maintain the state of a Flash navigation bar across frames. Thin from a documentation standpoint, but useful for its sample code. [NOTE: THE ABOVE ARTICLE IS NO LONGER AVAILABLE AT MACROMEDIA'S SITE, BUT CAN BE READ AT THE WAYBACK MACHINE'S WEB ARCHIVE.]

Macromedia's Hawaii Map Demo
http://www.FlashCentral.com/Tech/HawaiiMap/
Originally a sample site by Jon Gay, (the inventor of Flash), which demonstrates some of the things you can do with FS Command. This demo is now up at Flash Central. Again, good for the samples, but light on documentation. You'll have to root around with View Source...

Macromedia's Scripting with Flash and ActiveX
http://www.macromedia.com/support/flash/ts/documents/activex_script.htm
A list of the ActiveX-only (ie. *not* Netscape) methods available with Flash.

John Croteau's JavaScript/Flash Clock Tutorial
http://www.AHREF.com/guides/design/199807/0720croteau.html
A well written, in depth tutorial on making a clock in Flash movies that's run by JavaScript. A good application of FS Command that's worth checking out once you're familiar with FS Command basics.

John Croteau's FS Command Methods Table
http://www.FlashTek.com/Bible/FSCommand_Commands.htm
A complete spread-sheet style table listing the FS Command methods for JavaScript, the stand-alone player, and ActiveX.

Récupérée de « http://wiki.epistema.com/index.php/Int%C3%A9gration_des_questions_Flash_dans_Easyquizz_Pro »