Programmation de la mascotte.

Initialisation

Insérer la ligne de code JAVASCRIPT suivante : 


 <script language="JavaScript" src="http://www.flashpuppet.com/agentkarpet.js"></script>

après la balise <BODY>

exemple : 


        <html>
        <head>
        </head>
      <body>
       <script language="JavaScript" src="http://www.flashpuppet.com/agentkarpet.js"></script>

      <p>ici la suite de votre page HTML </p>
        etc...

        </body>
        </html>

Functions

Functions d’affichage

speak(text): affiche une bulle de texte et dit le texte text.
Description : fait parler le personnage.
Exemple : 

<input type="button" onClick="speak(‘Bonjour, comment ça va ?’);">

remarque : la bulle est affichée quelques secondes puis disparaît.

think(text): affiche une bulle de pensée et pense le texte text

Description : fait penser le personnage.
Exemple : 

<input type="button" onClick="think(‘je ne sais pas quoi faire…’);">

remarque : la bulle est affichée quelques secondes puis disparaît.

read(text): joue l’animation read et affiche un texte read.
Description : fait lire un texte au personnage.

Exemple : 

<input type="button" onClick="speak(‘Bonjour. Veuillez lire le texte suivant’);">

remarque : le texte est affiché jusqu’au click sur le bouton fermer.

Fonctions d’actions

action(nom_action) : fait jouer une animation nom_action au personnage.

nom_action peut être :

  • show : description : montre le personnage
  • idle : description : ne fait rien et attend une autre action.
    Cette action est en fait l’action par défaut quand aucune autre action n’est programmée.
  • alert : description: le personage frappe le gong.
  • applaud description: le personage applaudit de ses mains.
  • awe Description: le personnage salue l’internaute.
  • sing Description : le personnage prend un micro et chante
  • dance Description : le personnage esquisse un pas de danse.
  • hide Description : le personnage se cache
  • clean description : le personnage se nettoie.
  • noway Description : le personnage montre son désapprobation
  • think Description : le personnage s’assied pour penser.
  • worry Description : le personnage se gratte la tête
  • yawn Description : le personnage baye.
  • Appear Description : le personnage apparaît

Exemple d’utilisation des actions : 


<select name="menu" id="menu">
<option value="alert" selected>alert</option>
<option value="applaud">applaud</option> 
<option value="awe">awe</option>
<option value="sing">sing</option>
<option value="dance">dance</option> 
<option value="show">show</option>
<option value="hide">hide</option>
<option value="clean">clean</option>
<option value="noway">noway</option>
<option value="think">think</option>
<option value="worry">worry</option>
<option value="yawn">yawn</option>
<option value="appear">appear</option>
</select>
<input name="Submit" type="button" onClick="action(menu.value);" value="ACTION !">
wait(seconds) attend seconds secondes.

Cette fonction permet de marquer un temps de pause entre 2 actions successives.
Exemple d’utilisation des actions :

input type="button" onClick="speak(‘Bonjour. Veuillez lire le texte suivant’);wait(2);
speak('et voila la suite !');">

Fonctions de musique

speakMP3(url)

Description : fait jouer un son MP3 qui se trouve à l’adresse url et fait bouger les lèvres de la mascotte.

Exemple : 

<input name="Submit" type="button" onClick=" speakMP3 (“http://www.google.com/music.mp3);"
 value="jouer MP3">

playMP3(url)

Description : fait jouer un son MP3 qui se trouve à l’adresse url sans faire bouger les lèvres de la mascotte.

Exemple : 

<input name="Submit" type="button" onClick="playMP3(“http://www.google.com/music.mp3);" 
value="jouer MP3">

stopMP3()

Description: arête la musique jouée par playMP3.

Exemple : 

<input name="Submit" type="button" " onClick="stopMP3();" value="STOP">

stopspeakMP3()

Description : arête le son jouée par playMP3.

Exemple :

<input name="Submit" type="button" " onClick=" stopspeakMP3 ();" value="STOP">

functions de deplacement

go(x,y)

Description : fais disparaître la mascotte et la fait apparaître à la position x, y

Exemple : 

<input name="Submit" type="submit" onClick="go(x.value,y.value);" value="GO GO !">
<input name="x" type="text" id="x" value="200" size="5" >
<input name="y" type="text" id="y" value="200" size="5”>

Fonctions d’entrée-sorties

La marionnette permet également de faire une requête pour afficher des informations.
Il est par exemple possible d’interroger l’internaute et lui afficher les résultats de sa recherche comme par exemple :

Moteur de recherche, interroger une base de donnée etc..

inputShow(legend, url, target, method)

Montre une bulle d’entrée d’informations avec la legendre legend.

Une fois l’information saisie, la page url sera interrogée avec la cible target et la méthode method.

Les méthodes sont : POST ou GET. Par défaut, la méthode sera GET.

Si vous souhaitez ne pas quitter la page actuelle, mettez dans target les valeurs :

_self ou AUCUNE valeur (blanc)

Sortie :

La variable result=[RESULTAT de la page]

exemple d’utilisation 

<input name="Submit" type="submit" onClick=" inputShow (“Entrez une valeur” ,
’http://www.flashpuppet.com/testvaleur.php”,”_self”,”POST’);" 
value="exemple d’entrée">

le script suivant affiche une boîte de dialogue d’entrée avec la légende : « Entrez une valeur »

en cas de click, il ira chercher les résultats de la page http://www.flashpuppet.com/testvaleur.php en soumettant la valeur
mais sans recharger la page, car le target est mis à _self.

La valeur soumise par la méthode POST/GET est input

Exemple de fichier testvaleur.php 

result=Vous avez entré: <? echo $input; ?>

RESUME :

inputShow(legend, url, target, method)

variable envoyée : input

variable renvoyée par le script url : result

Vous pouvez interroger cette variable par la commande :GetResult()

Exemple : 

<input name="Submit" type="submit" onClick=" inputShow (“Entrez une valeur”,
’http://www.flashpuppet.com/testvaleur.php”,”_self”,”POST’);" value="exemple d’entrée">
<input name="Submit" type="submit" onClick="alert(getResul())" value="Voir sortie">

inputShowAction(legend, url, target, method, action)

Montre une bulle d’entrée d’informations avec la legendre legend.

Une fois l’information saisie, la page url sera interrogée avec la cible target et la méthode method,
puis l’animation action sera jouée pour afficher les informations renvoyées par la page url.

Les méthodes sont : POST ou GET. Par défaut, la méthode sera GET.

Les actions possibles sont :

  • read : la marionnette lit le résultat envoyé par le paramètre result de la page url
  • speak : la marionnette dit le résultat envoyé par le paramètre result de la page url
  • think : la marionnette pense le résultat envoyé par le paramètre result de la page url
  • script : la marionnette effectue une fonction javascript envoyée par le paramètre result de la page url (AVANCE)

Si vous souhaitez ne pas quitter la page actuelle, mettez dans target les valeurs :

_self ou AUCUNE valeur

exemple d’utilisation 

<input name="Submit" type="submit" onClick=" inputShow (“Entrez un nombre ”,
’http://www.flashpuppet.com/testvaleur.php”,”_self”,”POST’,’speak’);" 
value="exemple d’entrée">

le script suivant affiche une boîte de dialogue d’entrée avec la légende : « Entrez une valeur »

en cas de click, il ira chercher les résultats de la page http://www.flashpuppet.com/testvaleur2.php en soumettant la valeur
mais sans recharger la page, car le target est mis à _self.

La valeur soumise par la méthode POST est input

Exemple de fichier testvaleur2.php 

result=Le double de la valeur est : <? echo ($input*2); ?>

RESULTAT :

La mascotte vous demande «  : Entrez un nombre ».

Entrez par exemple 20.

Ensuite elle vous dit : « Le double de la valeur 20 est : 40 »

RESUME :

inputShowAction est trés similaire à inputShow, sauf qu’il y a le paramètre action en plus qui permet d’afficher le résultat
renvoyé par les paramètres result de la page .

InputHide()

Cache la bulle d’entrée des données.

Exemple : 

<input name="Submit" type="submit" onClick=" InputHide()" value="Cacher la bulle">

AVANCE

Vous pouvez également utiliser la fonction

callJavascript(functionName, parameters)

qui a pour but d’appeler une function javascript functionName avec les paramètres parameters.
Cette fonction peut être utilisée pour exécuter un script functionName en retour à une action inputShowAction.

removeActions()

Description : vide la file des toutes les actions.
Les actions sont en effet empilées dans la pile pour être traitées susccessivement.
Cette fonction permet de vider toute la pile des actions.


function getUrl(url,target)

Description: ouvre une fenêtre dont l'adresse est url et dont la cible est target.
Exemple:

<input name="Submit" type="submit"
 onClick="speak('voici la page de proxymis');getUrl('http://www.proxymis.com','_self');">

function disableDrag()

Description: deshabilite de pouvoir déplacer la mascotte avec la souris (Drag&Drop).

function enableDrag()

Description: habilite le déplacement de la mascotte avec la souris (Drag&Drop).

function startAt(x, y)

Description : Place la mascotet à la position initiale x,y
Cette fonction est à appeler en premier si vous souhaitez faire apparaître la mascotte à une position initiale particulière.



 
Accueil | Integrer | Exemple | Aide/FAQ | Produits | Contact